angularjs filters
Post on 15-Jul-2015
1.198 Views
Preview:
TRANSCRIPT
Tricode BVDe Schutterij 12 -18
3905 PL VeenendaalThe Netherlands
tel: 0318 - 559210 www.tricode.nlinfo@tricode.nl
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
top related