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: 'anil.singh@gmail.com',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: 'SMS',
        SendEmail: 'Email',
        '': ''
    },
    {
        Nominees: "Dilip Singh",
        Email: 'dilip@gmail.com',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: 'SMS',
        SendEmail: 'Email'
    },
    {
        Nominees: "Vrendra",
        Email: 'Vrendra@gmail.com',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: 'SMS',
        SendEmail: 'Email'
    },
    {
        Nominees: "Raju Chau",
        Email: 'raju@gmail.com',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: 'SMS',
        SendEmail: 'Email'
    },
    {
        Nominees: "Sunny L.",
        Email: 'sunny@gmail.com',
        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: 'anil.singh@gmail.com',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: 'SMS',
        SendEmail: 'Email',
        '': ''
    },
    {
        Nominees: "Dilip Singh",
        Email: 'dilip@gmail.com',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: 'SMS',
        SendEmail: 'Email'
    },
    {
        Nominees: "Vrendra",
        Email: 'Vrendra@gmail.com',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: 'SMS',
        SendEmail: 'Email'
    },
    {
        Nominees: "Raju Chau",
        Email: 'raju@gmail.com',
        Threshold: '50%, 70%, 80%, 85%, 90%, 100%,120%',
        SendSMS: 'SMS',
        SendEmail: 'Email'
    },
    {
        Nominees: "Sunny L.",
        Email: 'sunny@gmail.com',
        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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.