The “filter” Filter in AngularJS is used to filter the array and object elements and return the filtered items. In other words, this filter selects a subset (a smaller array containing elements that meet the filter criteria) of an array from the original array.
Syntax:
{{arrayexpression | filter: expression : comparator : anyPropertyKey}}
Parameter Values:
- arrayexpression: The source array on which the filter will be applied.
- expression: It is used to select the items from the array after the filter conditions are met. It can be of String type, Function type, or Object type.
- comparator: It is used to determine the value by comparing the expected value from the filter expression, and the actual value from the object array.
- anyPropertyKey: It is an optional parameter having the special property that is used to match the value against the given property. It is of String type & its default value is $.
Example 1: This example describes the AngularJS filter Filter by filtering & rendering the name only having the character “e” in the name.
HTML
<!DOCTYPE html>
<html>
<head>
<title>AngularJS filter Filter</title>
<script src=
</script>
</head>
<body>
<div ng-app="myApp"
ng-controller="namesCtrl">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>AngularJS filter Filter</h3>
<ol>
<strong>
<li ng-repeat="x in names | filter : 'e'">
{{ x }}
</li>
</strong>
</ol>
</div>
<script>
angular.module('myApp', [])
.controller('namesCtrl', function($scope) {
$scope.names = [
'Jani', 'Carl', 'Margareth',
'Hege Mathew', 'Joey Tribiani',
'Gustav', 'Birgit', 'Mary', 'Kai'
];
});
</script>
<p>
This example displays the names containing the
character "e"(filter)
</p>
</body>
</html>
|
Output:
Example 2: This example uses an object to filter its element.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
AngularJS filter Filter
</title>
<script src=
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="arrCtrl">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
AngularJS filter Filter
</h3>
<ol>
<li ng-repeat=
"x in customers | filter :{'name' : 'e', 'city' : 'Patna'}">
{{x.name + ", " + x.city}}
</li>
</ol>
</div>
<p>
The filter will give a match if there is an
"e" character in the name, and the city is
"Patna". Milk wasn't matched because the alphabet
'e' is not present.
</p>
<script>
var app = angular.module('myApp', []);
app.controller('arrCtrl', function ($scope) {
$scope.customers = [{
"name": "Chocolate Shake",
"city": "Patna"
}, {
"name": "Hot Chocolate",
"city": "Delhi"
}, {
"name": "Milk",
"city": "Patna"
}, {
"name": "Coffee",
"city": "Patna"
}, {
"name": "Tea",
"city": "Pune"
}, {
"name": "Mineral Water",
"city": "Mumbai"
}, {
"name": "Iced Tea",
"city": "Bangalore"
}];
});
</script>
</body>
</html>
|
Output:
Example 3: In this example, we are going to see a “strict” caparison that does not return any value unless it is a pure match.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
AngularJS filter Filter
</title>
<script src=
</script>
</head>
<body>
<div ng-app="myApp"
ng-controller="arrCtrl">
<h1 style="color:green">
GeeksforGeeks
</h1>
<h3>
AngularJS filter Filter
</h3>
<ol>
<li ng-repeat=
"x in customers | filter : 'Chinchwad' : true">
{{x.name + ", " + x.city}}
</li>
</ol>
</div>
<p>
The filter will give a match for the array
item(s) where one or more object values are
"Chinchwad".
</p>
<script>
var app = angular.module('myApp', []);
app.controller('arrCtrl', function($scope) {
$scope.customers = [{
"name": "Mumbai Food",
"city": "Chinchwad"
}, {
"name": "Gurgaon Catering",
"city": "Haryana City"
}, {
"name": "Noida temperature",
"city": " Chinchwad"
}, ];
});
</script>
</body>
</html>
|
Output:
Note: If you notice that the last Chinchwad in the array is not included in the list, because the last Chinchwad contains space before itself.
Reference: https://docs.angularjs.org/api/ng/filter/filter