Using Filters with AngularJS: Chaining Filters

I have shown you all of the built-in filters individually, but one of the best filter features is the way you can combine them to create more complex effects. In Listing 14-17, you can see how I have used chaining to combine the limitTo and orderBy filters.

Listing 14-17. Chaining Filters in the filters.html File

<tr ng-repeat=”p in products | orderBy:[myCustomSorter, ‘-price’] | limitTo: 5″>

<td>{{p.name}}</td>

<td>{{p.category}}</td>

<td>{{p.expiry}}</td>

<td class=”text-right”>{{p.price | currency }}</td>

</tr>

Tip You can chain together filters that operate on single data values, but there isn’t much point in doing this with the built-in filters like currency and date, since they are designed to format a specific kind of data. For this reason, you will usually see chaining used with filters rather than with operations on collections, allowing complex transformations to be performed.

Filters are chained together using the bar (|) character and are evaluated in the order in which they are written. In the listing, the orderBy filter is applied first, and then the limitTo filter is applied to the sorted results. The overall effect is that the ng-repeat directive operates on the first five sorted objects, as shown in Figure 14-15.

Source: Freeman Adam (2014), Pro AngularJS (Expert’s Voice in Web Development), Apress; 1st ed. edition.

Leave a Reply

Your email address will not be published. Required fields are marked *