- AngularJS provide filtering function in ng module.
- filter keyword can be used to filter from a array of element or array of object.
- In this demo, "We will create an example to filter from an array of item and from array of object with a specified property of the object".
- In the example the initial search is from a normal array containing fruit names as strings and next two searches are from array of student object containing name and subject property. the search is based on subject and name of the student.
- Below code shows the demonstration of AngularJS filter feature.
<!DOCTYPE html>
<html ng-app="studentApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular-route.min.js">
</script>
<meta charset="utf-8">
<title>AngularJS Provider Example</title>
</head>
<body ng-controller="ItemController">
<input type="text" ng-model="searchString"
placeholder="Enter search item">
<ol>
<li ng-repeat="fruit in fruits | filter:searchString">
{{fruit}}
</li>
</ol>
<input type="text" ng-model="subject"
placeholder="Enter search subject">
<ol>
<li ng-repeat="student in students | filter:subject">
{{student.name}} -- {{student.subject}}
</li>
</ol>
<input type="text" ng-model="name"
placeholder="Enter search name">
<ol>
<li ng-repeat="student in students | filter:name">
{{student.name}} -- {{student.subject}}
</li>
</ol>
<script>
var studentApp = angular.module("studentApp",[]);
//Using a provider inside controller
studentApp.controller("ItemController",
function ($scope) {
$scope.fruits = [
"Apple","Grapes","Orange",
"Banana","Pears","Plum",
"Mango","kiwi","litchi"
];
$scope.students = [
{"name":"Sandeep","subject":"English"},
{"name":"John","subject":"Mathematics"},
{"name":"Roja","subject":"Computer"},
{"name":"Balaji","subject":"English"},
{"name":"Suresh","subject":"Computer"},
{"name":"Bharat","subject":"English"},
{"name":"Arun","subject":"geography"},
];
});
</script>
</body>
</html>
- The demo of the following code can be found in the JSBIN link.Output of the above code present below embedded JSBIN.
