angularjs filters

15
Tricode BV De Schutterij 12 -18 3905 PL Veenendaal The Netherlands tel: 0318 - 559210 www.tricode.nl [email protected] ANGULAR JS FILTERS Andrej Gasteovski 22.04.2015

Upload: tricode

Post on 15-Jul-2015

1.196 views

Category:

Technology


0 download

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

Follow us:tricode.nlfacebook.com/tricodelinkedin.com/company/tricodeslideshare.net/tricodetwitter.com/tricode