Mastering Web Application

(Rick Simeone) #1
Chapter 4

To remedy this situation we can create an intermediate variable (filteredBacklog)
that would hold a filtered array:


ng-repeat="item in filteredBacklog = (backlog | filter:{$: criteria,
done: false})"

Then, counting filtered results boils down to displaying the length of a saved array:


Total: {{filteredBacklog.length}}

The preceding pattern for counting filtering objects, while not very intuitive, allows
us to have filtering logic in one place only.


The other possibility is to move the whole filtering logic to a controller and only
expose filtered results on a scope. This method has one more advantage: it moves
filtering code to a controller where it is very easy to unit test. To use this solution you
will need to learn how to access filters from the JavaScript; something that is covered
later on in this chapter.


Sorting with the orderBy filter


Quite often a tabular data can be sorted freely by users. Usually clicking on a header
of an individual column selects a given field as sort criteria, while clicking again
reverses the sort order. In this section, we are going to implement this common
pattern with AngularJS.


The orderBy filter will be our primary tool for this job. When finished, our
sample table holding list of backlog items will get fully functional sorting icons
shown as follows:

Free download pdf