Mastering Web Application

(Rick Simeone) #1
Chapter 4

Several filters can be combined (chained) to form a transformation pipeline.
As an example we can format a string by limiting its length to 80 characters
and convert all the characters to lowercase:


{{myLongString | limitTo:80 | lowercase}}

Working with built-in filters


AngularJS comes with several filters bundled as part of the core library. In
general we can divide built-in filters into two groups: formatting filters and


Array-transforming filters

Formatting filters

Here is a list of built-in formatting filters. Their purpose and usage scenarios
are easy to decipher:



  • currency: It formats numbers with two decimal places and a
    currency symbol.

  • date: It formats date according to a specified data format. Model can
    contain dates expressed as Date objects or as Strings (in this case Strings
    will be parsed to a Date object before formatting).

  • number: It will format input with a number of decimal places specified
    as an argument to this filter.

  • lowercase and uppercase: As the same implies, those filters can be
    used to format strings into their lowercase or uppercase form.

  • json: This filter is mostly useful for debugging purposes as it can
    assure "pretty-print" for JavaScript objects. Typical usage looks like
    follows:
    {{someObject | json}}
    . It is mostly used for
    debugging purposes.


Array-transforming filters

By default AngularJS provides three filters operating on arrays:



  • limitTo: It returns an array shrunk to the specified size. We can retain
    elements either from the beginning of a collection or from its end (in this
    case the limit parameter must be provided as a negative number).

  • Filter: This is a general-purpose filtering utility. It is very flexible and
    supports many options to precisely select elements from a collection.

  • orderBy: Ordering filter can be used to sort individual elements in an array
    based on provided criteria.

Free download pdf