Code
<div ng-app="app" ng-controller="appCtrl">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="pull-right" style="padding: 8px; padding-right: 0px;"><input class="form-control" placeholder="Global search" ng-model="globalSearchTerm" ng-change="globalSearch(globalSearchTerm)" /></div>
<div class="navbar-header">
<a class="navbar-brand" href="index.html">m-grid</a>
</div>
</div>
</nav>
<div class="container">
<div class="pull-right"><input class="form-control" placeholder="Search" ng-model="localSearchTerm" ng-change="localsearch(localSearchTerm)" /></div>
<div class="clearfix"></div>
<br/>
<m-grid grid-options="gridOptions"></m-grid>
</div>
</div>
<script>
var app = angular.module('app', ['ui.bootstrap', 'm-grid']);
app.controller('appCtrl', function ($scope, $rootScope) {
$scope.gridOptions = {
columns: [{
name: '#',
field: 'id'
}, {
name: 'Full name',
field: 'fullName'
}, {
name: 'Email',
field: 'email'
}],
sorting: true,
defaultSorting: 'id',
enableSearch: true
};
var data = [];
for (var i = 0; i < 105; i++) {
data.push({
id: (i + 1),
fullName: 'Name ' + (i + 1),
email: 'email' + (i + 1) + '@test.com'
})
}
$scope.gridOptions.data = data;
$scope.globalSearch = function(search) {
$rootScope.$broadcast('globalSearch', search);
};
$scope.localsearch = function(search) {
$scope.gridOptions.search = search;
}
})
</script>
We can enable search by two way
- Global search : A global search box present in all page and a broadcast method update globa search value
- Local search : Search box on only perticular page. Set
gridOptions.search
when search model value change.