Home
Tutorials
Microsoft Technologies Tutorials
Java Programming Tutorials
Web Designing Tutorials
Script Programming Tutorials
Database Programming Tutorials
Mobile Technologies Tutorials
Other Programming Tutorials
Examples
Articles
Tools
News
AngularJS UI Grid Filtering Example
Keywords : Angularjs ng-grid filtering example, Angularjs filter ui grid columns data example, Angularjs ui grid filter from text input field example, Angularjs filter data using ui grid filtering
Example
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> Angularjs UI-Grid Filtering Example </title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="https://ui-grid.info/release/ui-grid.js"></script> <link rel="stylesheet" href="https://ui-grid.info/release/ui-grid.css" type="text/css"> <script type="text/javascript"> var app = angular.module("uigridApp", ["ui.grid"]); app.controller("uigridCtrl", function ($scope) { $scope.gridOptions = { enableFiltering: true, columnDefs: [ { field: 'name' }, { field: 'age' }, { field: 'location', enableFiltering: false } ], onRegisterApi: function (gridApi) { $scope.grid1Api = gridApi; } }; $scope.users = [ { name: "Madhav Sai", age: 10, location: 'Nagpur' }, { name: "Suresh Dasari", age: 30, location: 'Chennai' }, { name: "Rohini Alavala", age: 29, location: 'Chennai' }, { name: "Praveen Kumar", age: 25, location: 'Bangalore' }, { name: "Sateesh Chandra", age: 27, location: 'Vizag' } ]; $scope.gridOptions.data = $scope.users; }); </script> <style type="text/css"> .myGrid { width: 500px; height: 230px; } </style> </head> <body ng-app="uigridApp"> <h2>AngularJS UI Grid Fitering Example</h2> <div ng-controller="uigridCtrl"> <div ui-grid="gridOptions" class="myGrid"></div> </div> </body> </html>
Click Here to See Result
Result
Previous
Next