AngularJS ng-grid filter — filterText format

AngularJS ng-grid filter - filterText format


The References file
?
1
2
3
4
5
6
7
8
9
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<style>
    .ngGridStyle {
        height: 300px;
    }
</style>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<style>
    .ngGridStyle {
        height: 300px;
    }
</style>
The HTML Code-sample
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
<form id="gridView" ng-app="ngGridApp">
    <fieldset ng-controller="ngGridController">
        <legend>
            <div class="form-group has-error">
                <div class="col-md-3">
                    <div class="input-group">
                        <input type="text" class="form-control" ng-model="filterOptions.filterText" placeholder="Search preferences..">
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                    </div>
                </div>
            </div>
        </legend>
        <div>
            <div class="ngGridStyle" ng-grid="ngGridView"></div>
        </div>
    </fieldset>
</form>
<form id="gridView" ng-app="ngGridApp">
    <fieldset ng-controller="ngGridController">
        <legend>
            <div class="form-group has-error">
                <div class="col-md-3">
                    <div class="input-group">
                        <input type="text" class="form-control" ng-model="filterOptions.filterText" placeholder="Search preferences..">
                        <span class="input-group-addon"><i class="fa fa-search"></i></span>
                    </div>
                </div>
            </div>
        </legend>
        <div>
            <div class="ngGridStyle" ng-grid="ngGridView"></div>
        </div>
    </fieldset>
</form>
The AngularJs code-sample
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
var app = angular.module('ngGridApp', ['ngGrid']);
app.controller('ngGridController', function ($scope) {
    $scope.ACPreferences = [{
        Nominees: "Anil Singh",
        Email: '[email protected]',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: 'SMS',
        SendEmail: 'Email',
        '': ''
    },
    {
        Nominees: "Dilip Singh",
        Email: '[email protected]',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: 'SMS',
        SendEmail: 'Email'
    },
    {
        Nominees: "Vrendra",
        Email: '[email protected]',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: 'SMS',
        SendEmail: 'Email'
    },
    {
        Nominees: "Raju Chau",
        Email: '[email protected]',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: 'SMS',
        SendEmail: 'Email'
    },
    {
        Nominees: "Sunny L.",
        Email: '[email protected]',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: 'SMS',
        SendEmail: 'Email'
    }];
    $scope.filterOptions = {
        filterText: ''
    };
    $scope.pagingOptions = {
        pageSizes: [10, 20, 50, 100],
        pageSize: 10,
        totalServerItems: 0,
        currentPage: 1
    };
    $scope.ngGridView = {
        data: 'ACPreferences',
        showGroupPanel: false,
        jqueryUIDraggable: false,
        enablePaging: true,
        showFooter: true,
        showFilter: false,
        filterOptions: $scope.filterOptions,
        pagingOptions: $scope.pagingOptions
    };
});
var app = angular.module('ngGridApp', ['ngGrid']);
app.controller('ngGridController', function ($scope) {
    $scope.ACPreferences = [{
        Nominees: "Anil Singh",
        Email: '[email protected]',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: 'SMS',
        SendEmail: 'Email',
        '': ''
    },
    {
        Nominees: "Dilip Singh",
        Email: '[email protected]',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: 'SMS',
        SendEmail: 'Email'
    },
    {
        Nominees: "Vrendra",
        Email: '[email protected]',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: 'SMS',
        SendEmail: 'Email'
    },
    {
        Nominees: "Raju Chau",
        Email: '[email protected]',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: 'SMS',
        SendEmail: 'Email'
    },
    {
        Nominees: "Sunny L.",
        Email: '[email protected]',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: 'SMS',
        SendEmail: 'Email'
    }];

    $scope.filterOptions = {
        filterText: ''
    };

    $scope.pagingOptions = {
        pageSizes: [10, 20, 50, 100],
        pageSize: 10,
        totalServerItems: 0,
        currentPage: 1
    };

    $scope.ngGridView = {
        data: 'ACPreferences',
        showGroupPanel: false,
        jqueryUIDraggable: false,
        enablePaging: true,
        showFooter: true,
        showFilter: false,
        filterOptions: $scope.filterOptions,
        pagingOptions: $scope.pagingOptions
    };
});
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.