AngularJS : filters

This entry was posted by on Vendredi, 19 octobre, 2012 at

filter is a handy feature that will facilitate displaying data. To begin with there are filters that will allow formatting to display a date or a number according to a given pattern. Filters use the syntax | (“pipe”) well known to all those who use shell commands:

Or simply transformations of strings:

And It is possible to chain filters.

But also allows a filter to modify the DOM like orderBy filter for easy sorting table by combining ng-repeat directive. Though you mind that it’s possible to pass parameters such as for orderBy 2 parameters are proposed to define a predicate and a sort direction. The 2-way databinding-enables the filter dynamically.

Another interesting example is filter to reduce a data table in based on a criterion. This, again with the 2-way data binding, provides a dynamic display which is good practice to improve user experience:

Of course you can create your own filters. The syntax is similar to the guidelines, controllers and services.
In the following example the filter can build a string.

This powerful tool is yet another great feature, make code readable. Simple to implement it gives the possibility to imagine complex implementations. Below is an example of a sequence of two filters on a repeat to paginate a table:

Comments are closed.