AngularJS filter Filter
Example
Display the items that contains the letter "A":
<div ng-app="myApp" ng-controller="arrCtrl">
<ul>
<li ng-repeat="x
in cars | filter : 'A'">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('arrCtrl',
function($scope) {
$scope.cars = ["Aston Martin",
"Audi", "Bentley", "BMW", "Bugatti"];
});
</script>
Try it Yourself »
Definition and Usage
The filter filter allows us to filter an array, and return an
array containing only the matching items.
This filter can only be used for arrays.
Syntax
{{
arrayexpression | filter : expression :
comparator }}
Parameter Values
| Value | Description |
|---|---|
| expression | The expression used when selecting
items from the array. The expression can be of type: String: The array items that match the string will be returned. Object: The object is a pattern to search for in the array. Example:
filter: {"name" : "H",
"city": "London"} will return the array items with a name
containing the letter "H", where the city contains the word "London". See
example below.Function: A function which will be called for each array item, and items where the function returns true will be in the result array. |
| comparator | Optional. Defines how strict the comparison should be. The value can be: true : Returns a match only if the value of the array item is exactly what we compare it with. false : Returns a match if the value of the array item contains what we compare it with. This comparison is not case sensitive. This is the default value. function : A function where we can define what will be considered a match or not. |
More Examples
Example
Use an object as a filter:
<div ng-app="myApp" ng-controller="arrCtrl">
<ul>
<li ng-repeat="x
in customers | filter : {'name' : 'O', 'city' : 'London'}">
{{x.name + ", " + x.city}}
</li>
</ul>
</div>
<script>
var app =
angular.module('myApp', []);
app.controller('arrCtrl', function($scope) {
$scope.customers = [
{"name" :
"Alfreds Futterkiste", "city" : "Berlin"},
{"name" : "Around the Horn", "city" : "London"},
{"name" : "B's Beverages", "city" : "London"},
{"name" : "Bolido Comidas preparadas", "city" : "Madrid"},
{"name" : "Bon app", "city" : "Marseille"},
{"name" : "Bottom-Dollar Marketse" ,"city" : "Tsawassen"},
{"name" : "Cactus Comidas para llevar", "city" : "Buenos Aires"}
];
});
</script>
Try it Yourself »
Example
Do a "strict" comparison, which does not return a match unless the value is exactly the same as the expression:
<div ng-app="myApp" ng-controller="arrCtrl">
<ul>
<li ng-repeat="x
in customers | filter : 'London' : true">
{{x.name + ", " + x.city}}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp',
[]);
app.controller('arrCtrl', function($scope) {
$scope.customers = [
{"name" : "London Food", "city" : "London"},
{"name" : "London Catering",
"city" : "London City"},
{"name" : "London Travel", "city" : "Heathrow,
London"}
];
});
</script>
Try it Yourself »
Related Pages
AngularJS Tutorial: Angular Filters
