Angularjs Quick Start Guide 06: Filters

Through the pipe character (' | ' ), filters can be added to expressions and directives.

ANGULARJS Filter

Angularjs filters can be used to convert (format) data:

Filters

Filter	Description
Currency	Formats a number as a cash format.
Filter	Select a subkey from a collection.
lowercase	Converts a string to lowercase.
By	Sorts the collection elements by an expression.
Uppercase	Converts a string to uppercase.

Add a filter to an expression

The filter can be passed through the pipe character (' | ' ) is added to an expression.

For the next two examples we will use the person controller that was used in the previous chapters.

　　The uppercase filter is used to convert a given string into uppercase:

<ng-app= ""  ng-controller= "Personctrl"><  p>The name is {{lastName | uppercase}}</p>  </div>

Run

　　The lowercase filter is used to convert a given string into lowercase:

<ng-app= ""  ng-controller= "Personctrl"><  p>The name is {{lastName | lowercase}}</p>  </div>

Run

Currency filter

　　currency filters are used to format numbers as cash formats:

<DivNg-app=""Ng-controller= "Costctrl"><inputtype= "Number"Ng-model= "Quantity"><inputtype= "Number"Ng-model= "Price"><P>Total = {{(quantity * price) | currency}}</P></Div>

Run

Add a filter to an instruction

Filters can also be passed through the pipe character (' | ' ) is added to the directive.

　　 The order by filter is sorted by an array of expressions:

<DivNg-app=""Ng-controller= "Namesctrl"><ul>  <Ling-repeat= "x in Names | by: ' Country '">{{x.name + ', ' + X.country}}</Li></ul><Div>

Run

Filter by input

By using the pipe character in the instruction (' | ' ), followed by a filter with a colon followed by the name of a model, can form an input filter to filter the collection based on what the user enters:

<DivNg-app=""Ng-controller= "Namesctrl"><P><inputtype= "text"Ng-model= "Test"></P><ul>  <Ling-repeat= "x in Names | filter:test | By: ' Country '">{{(X.name | uppercase) + ', ' + X.country}}</Li></ul></Div>

Run

Previous chapter-Angularjs Quick Start Guide 05: Controller Next Chapter-ANGULARJS Quick Start Guide 07:http objects

Angularjs Quick Start Guide 06: Filters