angularjsHow do I use the AngularJS filter pipe?
The AngularJS filter pipe is used to filter an array of data to return a subset of the data that meets certain criteria.
Example
<div ng-app="myApp" ng-controller="MyController">
<ul>
<li ng-repeat="person in people | filter:myFilter">
{{ person.name }}
</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('MyController', function($scope) {
$scope.people = [
{name: 'John', age: 25},
{name: 'Jane', age: 30},
{name: 'Jim', age: 27}
];
$scope.myFilter = function(person) {
return person.age > 25;
};
});
</script>
Output example
- Jane
- Jim
The code above uses the AngularJS filter pipe to filter the array of people and return only the people with an age greater than 25.
The code consists of the following parts:
- A
<div>
element with anng-app
andng-controller
attribute to define the application and controller. - An
<ul>
element with anng-repeat
attribute to loop through each item in thepeople
array. - A
filter:myFilter
expression in theng-repeat
attribute to use themyFilter
function to filter thepeople
array. - A
$scope.people
array of objects with each object containing aname
andage
property. - A
$scope.myFilter
function to filter thepeople
array and return only the people with an age greater than 25.
For more information on the AngularJS filter pipe, see the AngularJS documentation.
More of Angularjs
- How can I become an Angular expert from a beginner level?
- How can I create an editable AngularJS application?
- How can I use the Yandex Map API with AngularJS?
- How can I use Angular to zoom in and out of a div?
- How do I install Yarn using Angular?
- How do I use AngularJS to zoom in on an image?
- How do I use Angular Zone to run my code?
- How do I use Angular to zip files?
- How do I use Angular Zone to detect and run Angular change detection?
- How do I copy an element in AngularJS?
See more codes...