Mastering Web Application

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.