Filters associated with directives and expressions are responsible for easily manipulate and transform any value. It is added using a pipe character. It is, not only combined with expressions inside a template, but also the ones injected in other components such as controllers and services.
Filters are useful when we need to format dates and currency according to our current locale. They are the perfect solution to easily perform any data manipulation.
The syntax for using filters is:
To make filters interact with the expression, we just need to put them inside double curly brackets:
Also, the filters can be combined, thus creating a chain where the output of filter1 is the input of filter2 using the
pipeline(|) symbol.
{{expression | filter1 | filter2}}The framework has a set of ready-to-use filters that can be quite useful in your daily development.
The different types of AngularJS filters.
| Filter Name | Description |
|---|
currency | formats text in a currency format. |
date | formats text to date format with the optional format mask. |
filter | filter the array to a subset of it based on provided criteria. |
json | displays the content of an object in the JSON format. |
limitTo | limits the size of the array or string. |
lowercase | converts a text to lower case text. |
number | formats a string as a number. |
orderBy | orders the array based on provided criteria. |
uppercase | converts a text to upper case text. |
currency
The currency filter is used to format a number based on a currency.
The result will be the number $10.00, formatted and prefixed with the dollar sign. We can also apply a specific locale symbol, shown as follows.
Now, the output will be R$10.00, which is the same as the previous output but prefixed with a different symbol. Although it seems right to apply just the currency symbol, and in this case the Brazilian Real (R$), this doesn't change the usage of the specific decimals and group separators.
In order to achieve the correct output, in this case R$10,00 instead of R$10.00, we need to configure the Brazilian (PT-BR) locale available inside the AngularJS distribution package. In this package, we might find locales for most countries, and we just need to import these locales to our application in the following manner.
<script src="js/lib/angular-locale_pt-br.js"></script>
After importing the locale, we will not have to use the currency symbol anymore because it's already wrapped inside. Besides the currency, the locale also defines the configuration of many other variables, such as the days of the week and months, which is very useful when combined with the next filter used to format dates.
date
The date filter is one of the most useful filters of the framework. We can use this filter by declaring it inside any expression. In the following example, we have used the filter on a date variable attached to the scope:
{{ car.entrance | date }}The output will be Dec 10, 2013. However, there are numerous combinations we can make with the optional format mask:
{{ car.entrance | date:'MMMM dd/MM/yyyy HH:mm:ss' }}When you use this format, the output changes to December 10/12/2013 21:42:10.
filter
We can filter a list of data. This filter acts over an array and apply any filtering criteria.
<tr ng-class="{selected: car.selected}" ng-repeat="car in cars | filter:criteria">json
Sometimes, generally for debugging purposes, it might be necessary to display the contents of an object in the JSON format. JSON, also known as JavaScript Object Notation, is a lightweight data interchange format.
In the next example, we will apply the filter to a car object:
The expected result if we use it based inside the car's list of our application is as follows:
{
"plate": "6MBV006",
"color": "Blue",
"entrance": "2013-12-09T23:46:15.186Z"
}limitTo
Sometimes, we need to display text, or even a list of elements, and it might be necessary to limit its size. This filter does exactly that and can be applied to a string or an array.
The following code is an example where there is a limit to the expression
{{ expression | limitTo:10 }}lowercase
The lowercase filter displays the content of the expression in lowercase:
{{ expression | lowercase }}number
The number filter is used to format a string as a number. Similar to the currency and date filters, the locale can be applied to present the number using the conventions of each location. Also, you can use a fraction-size parameter to support the rounding up of the number:
The output will be 10.00 because we used the fraction-size configuration. In this case, we can also take advantage of the locale configuration to change the
fraction separator.
orderBy
With the orderBy filter, we can order any array based on a predicate expression. This expression is used to determine the order of the elements and works in
three different ways.
| Type | Description |
|---|
| String | This is the property name. Also, there is an option to prefix + or – to indicate the order direction. At the end of the day, +plate or -plate are predicate expressions that will sort the array in an ascending or descending order. |
| Array | Based on the same concept of String's predicate expression, more than one property can be added inside the array. Therefore, if two elements are
considered equivalent by the first predicate, the next one can be used, and so on. |
| Function | This function receives each element of the array as a parameter and returns a number that will be used to compare the elements against each other. |
In the following code, the orderBy filter is applied to an expression with the predicate and reverse parameters:
{{ expression | orderBy:predicate:reverse }}<tr ng-class="{selected: car.selected}" ng-repeat="car in cars | filter:criteria | orderBy:field:order">uppercase
This parameter displays the content of the expression in uppercase:
{{ expression | uppercase }}
