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 23.5 implements a controller that defines the $scope.cameras
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 9 adds the $scope.filteredCameras
property to store the filtered array.
Notice that line 10 sets a $scope.reverse
value to keep track of the sort direction. Then line 11 sets a $scope.column
value to keep track of which property name of objects in the cameras array to sort on. Lines 12–15 define the setSort()
function, which is used to update the column
and reverse
values.
Line 15 defines the $scope.filterString
property, which filters the objects to include in filteredCameras
. Lines 17–20 define the setFilter()
function, which calls the filterFilter()
provider to limit the items in filteredCameras
to the ones that loosely match filterString
. Lines 2 and 3 inject the filterFilter
provider into the controller.
Listing 23.6 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 23.3 shows the resulting webpage.
01 angular.module('myApp', []).
02 controller('myController', ['$scope', 'filterFilter',
03 function($scope, filterFilter) {
04 $scope.cameras = [
05 {make:'Canon', model:'70D', mp:20.2},
06 {make:'Canon', model:'6D', mp:20},
07 {make:'Nikon', model:'D7100', mp:24.1},
08 {make:'Nikon', model:'D5200', mp:24.1}];
09 $scope.filteredCameras = $scope.cameras;
10 $scope.reverse = true;
11 $scope.column = 'make';
12 $scope.setSort = function(column){
13 $scope.column = column;
14 $scope.reverse = !$scope.reverse;
15 };
16 $scope.filterString = '';
17 $scope.setFilter = function(value){
18 $scope.filteredCameras =
19 filterFilter($scope.cameras, $scope.filterString);
20 };
21 }]);
01 <!doctype html>
02 <html ng-app="myApp">
03 <head>
04 <title>AngularJS Sorting and Filtering</title>
05 <style>table{text-align:center;}td,th{padding:3px;}</style>
06 </head>
07 <body>
08 <div ng-controller="myController">
09 <h2>Sorting and Filtering</h2>
10 <input type="text" ng-model="filterString">
11 <input type="button" ng-click="setFilter()" value="Filter">
12 <table>
13 <tr>
14 <th ng-click="setSort('make')">Make</th>
15 <th ng-click="setSort('model')">Model</th>
16 <th ng-click="setSort('mp')">MegaPixel</th>
17 </tr>
18 <tr ng-repeat=
19 "camera in filteredCameras | orderBy:column:reverse">
20 <td>{{camera.make}}</td>
21 <td>{{camera.model}}</td>
22 <td>{{camera.mp}}</td>
23 </tr>
24 </table>
25 <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
26 <script src="/js/angular_filter_sort.js"></script>
27 </body>
28 </html>