A very common use of filters is to order or filter out dynamic elements built using the ng-repeat
directive from JavaScript arrays. This section provides an example of implementing orderBy
filters to generate a table that can be sorted by column and filtered by a string from an <input>
element.
Listing 5.9 implements a controller that defines the $scope.planes
array to use as input data in the scope. Since you do not want to alter the actual model data when sorting and filtering, line 12 adds the $scope.filteredPlanes
property to store the filtered array.
Notice that line 13 sets a $scope.reverse
value to keep track of the sort direction. Then line 14 sets a $scope.column
value to keep track of which property name of objects in the planes
array to sort on. Lines 15–16 define the setSort()
function, which is used to update the column
and reverse
values.
Line 19 defines the $scope.filterString
property, which filters the objects to include in filteredPlanes
. Lines 20–23 define the setFilter()
function, which calls the filterFilter()
provider to limit the items in filteredPlanes
to the ones that loosely match filterString
. Lines 2 and 3 inject the filterFilter
provider into the controller.
Listing 5.10 implements a template that includes a text <input>
that binds to the filterString
value and a button <input>
that calls setFilter()
when clicked.
Notice that in lines 14–16 the table headers apply ng-click
directives to call setSort()
to set the sort column. Lines 18–23 implement the rows of the table by using the ng-repeat
directive. Notice that the ng-repeat
directive uses the orderBy
filter to specify the column name and reverse values set by the setSort()
function. Figure 5.5 shows the resulting web page.
01 angular.module('myApp', [])
02 .controller('myController', ['$scope', 'filterFilter',
03 function($scope, filterFilter) {
04 $scope.planes = [
05 {make: 'Boeing', model: '777', capacity: 440},
06 {make: 'Boeing', model: '747', capacity: 700},
07 {make: 'Airbus', model: 'A380', capacity: 850},
08 {make: 'Airbus', model: 'A340', capacity: 420},
09 {make: 'McDonnell Douglas', model: 'DC10', capacity: 380},
10 {make: 'McDonnell Douglas', model: 'MD11', capacity: 410},
11 {make: 'Lockheed', model: 'L1011', capacity: 380}];
12 $scope.filteredPlanes = $scope.planes;
13 $scope.reverse = true;
14 $scope.column = 'make';
15 $scope.setSort = function(column){
16 $scope.column = column;
17 $scope.reverse = !$scope.reverse;
18 };
19 $scope.filterString = '';
20 $scope.setFilter = function(value){
21 $scope.filteredPlanes =
22 filterFilter($scope.planes, $scope.filterString);
23 };
24 }]);
01 <!doctype html>
02 <html ng-app="myApp">
03 <head>
04 <title>AngularJS Sorting and Filtering</title>
05 <style>
06 table{text-align:right;}
07 td,th{padding:3px;}
08 th{cursor:pointer;}
09 </style>
10 </head>
11 <body>
12 <div ng-controller="myController">
13 <h2>Sorting and Filtering</h2>
14 <input type="text" ng-model="filterString">
15 <input type="button" ng-click="setFilter()" value="Filter">
16 <table>
17 <tr>
18 <th ng-click="setSort('make')">Make</th>
19 <th ng-click="setSort('model')">Model</th>
20 <th ng-click="setSort('capacity')">Capacity</th>
21 </tr>
22 <tr ng-repeat=
23 "plane in filteredPlanes | orderBy:column:reverse">
24 <td>{{plane.make}}</td>
25 <td>{{plane.model}}</td>
26 <td>{{plane.capacity}}</td>
27 </tr>
28 </table>
29 <script src="http://code.angularjs.org/1.3.0/angular.min.js"></script>
30 <script src="js/filter_sort.js"></script>
31 </body>
32 </html>