<!DOCTYPE html> <html> <head> <script src="angular.js"></script> <script src="script.js"></script> <style> table { border-collapse: collapse; } table, th, td { border: 1px solid #e1e1e1; } th, td { padding: 6px; } thead { background-color: #fcfcfc; } </style> </head> <body ng-app="mainModule"> <div ng-controller="mainController"> <h3>1. Simple substring filter</h3> <label>Filter: <input type="text" ng-model="simpleFilter" /></label><br /> <table> <thead> <tr> <th>First name</th> <th>Last name</th> <th>Age</th> </tr> </thead> <tbody> <tr ng-repeat="person in people | filter:simpleFilter"> <td>{{person.firstName}}</td> <td>{{person.lastName}}</td> <td>{{person.age}}</td> </tr> </tbody> </table> <br /> <h3>2. Object's properties filter (alternative 1)</h3> <label>Last name: <input type="text" ng-model="objProp1LastNameFilter" /></label><br /> <label>Age: <input type="text" ng-model="objProp1AgeFilter" /></label><br /> <table> <thead> <tr> <th>First name</th> <th>Last name</th> <th>Age</th> </tr> </thead> <tbody> <tr ng-repeat="person in people | filter:{lastName: objProp1LastNameFilter, age: objProp1AgeFilter}"> <td>{{person.firstName}}</td> <td>{{person.lastName}}</td> <td>{{person.age}}</td> </tr> </tbody> </table> <br /> <h3>3. Object's properties filter (alternative 2)</h3> <label>First or last name: <input type="text" ng-model="objProp2NameFilter" /></label><br /> <label>Age: <input type="text" ng-model="objProp2AgeFilter" /></label><br /> <table> <thead> <tr> <th>First name</th> <th>Last name</th> <th>Age</th> </tr> </thead> <tbody> <tr ng-repeat="person in people | filter:{$: objProp2NameFilter, age: objProp2AgeFilter}"> <td>{{person.firstName}}</td> <td>{{person.lastName}}</td> <td>{{person.age}}</td> </tr> </tbody> </table> <br /> <h3>4. Storing the filtered array in a variable</h3> <label>Filter: <input type="text" ng-model="substrFilter" /></label><br /> <table> <thead> <tr> <th>First name</th> <th>Last name</th> <th>Age</th> </tr> </thead> <tbody> <tr ng-repeat="person in filteredPeople = (people | filter:substrFilter)"> <td>{{person.firstName}}</td> <td>{{person.lastName}}</td> <td>{{person.age}}</td> </tr> </tbody> </table> <br /> <strong>Number of filtered people: </strong>{{filteredPeople.length}}<br /> <br /> <h3>5. Custom array filter</h3> <table> <thead> <tr> <th>First name</th> <th>Last name</th> <th>Age</th> </tr> </thead> <tbody> <tr ng-repeat="person in people | filter:customArrayFilter"> <td>{{person.firstName}}</td> <td>{{person.lastName}}</td> <td>{{person.age}}</td> </tr> </tbody> </table> </div> </body> </html>
angular.module("mainModule", []) .controller("mainController", function ($scope, $filter, dateFilter) { // Initialization $scope.people = [ {firstName: "John", lastName: "Doe", age: 30}, {firstName: "Bob", lastName: "Smith", age: 26}, {firstName: "Jack", lastName: "White", age: 47}, {firstName: "Michael", lastName: "Green", age: 41} ]; // Utility functions $scope.customArrayFilter = function (item) { return (item.lastName.indexOf('it') != -1 && item.age >= 40); }; });



As we've mentioned in the formatting filters example, AngularJS lets us format data or manipulate array collections through filters. In this example we'll take a look at the array filters for data manipulation.

Looking at the example is the easiest way to learn more. In point 1 we have the basic built-in array filter and it's simply called filter. We use a people array that we've defined in JavaScript and filter its data specifying the filtering in the ng-repeat directive. Whenever we type something in the input element, the simpleFilter model variable changes and filter simply searches for the typed substring in all the fields of every object in the array.

We can decide to act only on specific object properties to filter the items in the array and that's what we do in point 2. Here we filter only lastName and age for every object searching for a substring only in those fields. We specify the substrings to search individually for each one of the two fields and both the substrings must match for an object to be returned.

In point 3 we see an alternative to point 2. Here we use a special dollar ($) symbol to say: search for the objProp2AgeFilter substring only in the age field of an array item and search for the objProp2NameFilter substring in all the fields (age included).

In point 4 we show how we can store the filtered array in a variable and use it somewhere else to have information on it. Here filteredPeople is the variable where the people array will be stored after applying the filter on it, so filteredPeople will contain only the items matching the filter conditions. This is very convenient for example in case we want to retrieve the length of the filtered array as we see at the end of the point where we write the filteredPeople.length expression.

filter allows us also to define a custom filtering function. In point 5 we define the customArrayFilter function to filter the people array. As you can see in JavaScript, the function signature is very simple: the custom function accepts a single parameter, the array item to check, and returns true if the item should be kept in the filtered array (filter match) or false if it has to be removed. Here we keep only the items where lastName contains the it substring and age is at least 40.