AngularJS Filters
Filters can be added to expressions and directives using a pipe
character.
AngularJS Filters
AngularJS filters can be used to transform data:
| Filter |
Description |
| currency |
Format a number to a currency format. |
| filter |
Select a subset of items from an array. |
| lowercase |
Format a string to lower case. |
| orderBy |
Orders an array by an expression. |
| uppercase |
Format a string to upper case. |
Adding Filters to Expressions
A filter can be added to an expression with a pipe character (|)
and a filter.
(For the next two examples we will use the person controller from the
previous chapter)
The uppercase filter format strings to upper case:
AngularJS Example
<div ng-app="" ng-controller="personController">
<p>The name is {{ lastName | uppercase }}</p>
</div>
The lowercase filter format strings to lower case:
AngularJS Example
<div ng-app="" ng-controller="personController">
<p>The name is {{ lastName | lowercase }}</p>
</div>
The currency Filter
The currency filter formats a number as currency:
AngularJS Example
<div ng-app="" ng-controller="costController">
<input type="number" ng-model="quantity">
<input type="number" ng-model="price">
<p>Total = {{ (quantity * price) | currency }}</p>
</div>
Adding Filters to Directives
A filter can be added to a directive with a pipe character (|) and a filter.
The orderBy filter orders an array by an expression:
AngularJS Example
<div ng-app="" ng-controller="namesController">
<ul>
<li ng-repeat="x in names | orderBy:'country'">
{{ x.name + ', ' + x.country }}
</li>
</ul>
<div>
Filtering Input
An input filter can be added to a directive with a pipe character (|) and
filter followed by a colon and a model name.
The filter filter selects a subset of an array:
AngularJS Example
<div ng-app="" ng-controller="namesController">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in names |
filter:test | orderBy:'country'">
{{ (x.name | uppercase) + ', ' + x.country }}
</li>
</ul>
</div>
Color Picker
