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
< p >The name is {{ lastName | uppercase }} < /p >
< /div >
Try it Yourself »
The lowercase filter format strings to lower case:
AngularJS Example
< p >The name is {{ lastName | lowercase }} < /p >
< /div >
Try it Yourself »
The currency Filter
The currency filter formats a number as currency:
AngularJS Example
< input type= "number" ng-model= "quantity" >
< input type= "number" ng-model= "price" >
< p >Total = {{ (quantity * price) | currency }} < /p >
< /div >
Try it Yourself »
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
< ul >
< li ng-repeat= "x in names | orderBy:'country'" >
{{ x.name + ', ' + x.country }}
< /li >
< /ul >
< div >
Try it Yourself »
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
< 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 >
Try it Yourself »