angularjs filters
TRANSCRIPT
Tricode BVDe Schutterij 12 -18
3905 PL VeenendaalThe Netherlands
tel: 0318 - 559210 [email protected]
ANGULAR JSFILTERS
Andrej Gasteovski
22.04.2015
• AngularJS expressions bind application data to the HTML.
• The result is displayed on the page exactly where the expression is written.
• Expressions can contain literals, operators and variables.
• Examples
Let’s start with expressions
<div ng-app="" ng-init="quantity=1;cost=5"><p>
Total in dollar: {{ quantity * cost }}</p></div>
<div ng-app="" ng-init="person={firstName:'John',lastName:'Doe'}">
<p>The name is {{ person.lastName }}</p>
</div>
Expressions can bind different kind of data: string, currency, date, object, array..
What if you want the result to be displayed in a specific format?
Use AngularJS filters to transform data.
*
Why filters?
Filters are added to AngularJS expressions or directives in order to transform the displayed data.They are added using the pipe “|” character.Example
Result
*
Filters
<div ng-app="" ng-controller="appCtrl">
<input type="number" ng-model="quantity">
<input type="number" ng-model="itemPrice">
<p>Total = {{ (quantity * itemPrice) | currency }}</p>
</div>
AngularJS has predefined filters for the most common data transformations:• currency• number• date• json• lowercase• uppercase• limitTo• orderBy
*
Filters
• Formats a number into currency.• When no currency sign is provided, the
local currency is used.• Usage
• Examples
*
currency
{{ expression | currency : symbol : fractionSize}}
<p>Total = {{ (quantity * price) | currency }}</p>
<p>Total = {{ (quantity * price) | currency : ‘USD’ }}</p>
<p>Total = {{ (quantity * price) | currency : ‘USD’ : 0 }}</p> Total = USD10
Total = $10.99
Total = USD10.99
• Formats a number into string.• If input is not a number, empty string
is returned.• Usage
• Examples
*
number
{{ expression | number : fractionSize}}
<p>Total = {{ (2.65 * 3.24) | number }}</p>
<p>Total = {{ (2.65 * 3.24) | number : 0 }}</p>
<p>Total = {{ ‘not a number’ | number : 4 }}</p>
Total = 8.586
Total = 8
Total =
• Formats date to a string based on a requested format.
• Usage
• Predefined formats• ‘medium’ Apr 21, 2015 08:14:32 PM• ‘short’ 4/21/15 08:14 PM• ‘fullDate’ Tuesday, April 21, 2015• ‘longDate’ April 21, 2015• ‘mediumDate’ Apr 21, 2015• ‘shortDate’ 4/21/15• ‘mediumTime’ 08:14:32 PM• ‘shortTime’ 08:14 PM
*
date
{{ expression | date : format : timezone}}
• By default, ‘mediumDate’ is used.• There are also custom formats
• More about date formats on docs.angularjs.org.
*
date
{{1429596872006 | date:'yyyy-MM-dd HH:mm:ss Z'}} 2015-04-21 08:14:32 +0200
{{1429596872006 | date:'MM/dd/yyyy @ h:mma'}} 04/21/2015 @ 08:14PM
{{1429596872006 | date:"MM/dd/yy @ hh:mm"}} 04/21/15 @ 05:40
{{'1429596872006' | date:"EEEE MM/dd/yyyy h:mm:
ss:sss"}}
Tuesday 04/21/2015 8:14:32:006
*
json• Converts JavaScript object into JSON.• Used for debugging.• Usage
• Example{{ expression | json : spacing}}
{{ {'price':'value'} | json }}{ "price": "value"}
{ "price": "value"}
{{ {'price':'value'} | json : 6 }}
*
lowercase & uppercase• Converts string into lowercase or
uppercase.• Usage
• Example
{{ expression | lowercase}}
{{"AngularJS Filters" | lowercase}} angularjs filters
ANGULARJS FILTERS{{"AngularJS Filters" | uppercase}}
{{ expression | uppercase}}
*
limitTo• Limits the number of elements in an array
to a specified number.• Takes elements from the beginning or the
end of the array.• Usage
• Example{{ expression | limitTo : limit : begin}}
Limit numbers: {{ [1, 2, 3, 4, 5, 6] | limitTo: 3 }} Limit numbers: [1,2,3]
Limit letters: AngularLimit letters: {{ "AngularJS" | limitTo: 7 }}
Limit long number: 1234Limit long number: {{ 123456 | limitTo: 4 }}
*
orderBy• Orders an array according to a specified
expression.• Numerical order for number and
alphabetical order for letters.• Usage
• Example{{ expression | orderBy : expression : reverse}}
{{[1, 5, 4, 3, 2] | orderBy }} [1,2,3,4,5]
["A","a","g","J","l","n","r","S","u"] {{"AngularJS" | orderBy }}
Summary
Filters in AngularJS are a powerful tool for transforming and displaying data in a specific format. AngularJS provides built-in filters for some of the most common formats, but it is also possible to create a custom filter for more specific needs. Tutorial about custom filters can be found on docs.angularjs.org.
More information about filters in AngularJSw3school AngularJS tutorialOfficial AngularJS API DocsInteractive tutorial about AngularJS