Angular js provides a very powerful feature for searching in a list of records. Let us understand it step by step with the help of an example.
Step 1: Include the angular js scripts in your project. Example as follows:
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
Step 2: In your angular controller write the following code:
angular.module('searchingApp', ['angularUtils.directives.dirPagination'])
.controller('DemoCtrl', function ($scope, $http) {
$scope.users = [{ id: 1, name: "Mayank", hobby: "Swimming" }, { id: 2, name: "Shubham", hobby: "Singing" }, { id: 3, name: "Hina", hobby: "Dancing" }, { id: 4, name: "Shikha", hobby: "Reading" }, { id: 5, name: "Deepika", hobby: "Driving" },{ id: 6, name: "Ajendra", hobby: "Eating" }, { id: 7, name: "Manvendra", hobby: "Exploring" }, { id: 8, name: "Abhishek", hobby: "Laughing" }, { id: 9, name: "Chetan", hobby: "Singing" }, { id: 10, name: "Mona", hobby: "Sleeping" }]
});
Note: Here $scope.users contains the data on which I have to apply search.
Step 3: Now write the following code inside the body tag:
<div ng-controller="DemoCtrl">
<input type="text" ng-model="Name" />
<table cellpadding="1" cellspacing="1" border="1" align="center">
<tr>
<td>ID</td>
<td>Name</td>
<td>Hobby</td>
</tr>
<tr ng-repeat="user in users|filter:Name">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.hobby}}</td>
</tr>
</table>
</div>
Step 4: You will see the entire list of records, now if you type any name in your text box it will automatically filter that in the list, as the scope of the serach text box is supplied to the filter in ng-repeat.
Summing up the code.....
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body ng-app="searchingApp">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="Scripts/dirPagination.js"></script>
<div ng-controller="DemoCtrl">
<input type="text" ng-model="Name" />
<table cellpadding="1" cellspacing="1" border="1" align="center">
<tr>
<td>ID</td>
<td>Name</td>
<td>Hobby</td>
</tr>
<tr ng-repeat="user in users|filter:Name">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.hobby}}</td>
</tr>
</table>
</div>
<script>
angular.module('searchingApp', ['angularUtils.directives.dirPagination'])
.controller('DemoCtrl', function ($scope, $http) {
$scope.users = [{ id: 1, name: "Mayank", hobby: "Swimming" }, { id: 2, name: "Shubham", hobby: "Singing" }, { id: 3, name: "Hina", hobby: "Dancing" }, { id: 4, name: "Shikha", hobby: "Reading" }, { id: 5, name: "Deepika", hobby: "Driving" },
{ id: 6, name: "Ajendra", hobby: "Eating" }, { id: 7, name: "Manvendra", hobby: "Exploring" }, { id: 8, name: "Abhishek", hobby: "Laughing" }, { id: 9, name: "Chetan", hobby: "Singing" }, { id: 10, name: "Mona", hobby: "Sleeping" }]
});
</script>
</body>
</html>
Hope it helps...!
0 Comment(s)