Using Filters to Implement Ordering and Filtering
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.
Listing 5.9 filter_sort.js: Building a Scope That AngularJS Can Use and Then Sorting and Ordering
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 }]);
Listing 5.10 filter_sort.html: An AngularJS Template That Implements filter and orderBy Filters to Order and Filter Items in a Table View
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>
