The use method of filter filters in Angularjs

Filter filters is a very useful tool in angular, through which we can easily format our data, see examples:

Add Filter in Expression

Filters can be added to an expression by a pipe character (|) and a filter ...

(for the following two instances, we will use the person controller mentioned in the previous chapter))

The uppercase filter formats the string as uppercase:

Angularjs instance

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

Try the»lowercase filter to format the string as lowercase:

Angularjs instance

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

Try»
--------------------------------------------------------------------------------

Currency filter
Currency filters to format numbers in currency format:

Angularjs instance

<div ng-app= "myApp" ng-controller= "Costctrl" >
<input type= "number" ng-model= "Quantity" >
< Input type= "number" ng-model= "Price" >
<p> Lump sum = {{(quantity * prices) | currency}}</p>
</DIV >

Try»
--------------------------------------------------------------------------------

adding filters to Directives
The filter can be added to the instruction by a pipe character (|) and a filter.

The order by filter arranges an array based on an expression:

Angularjs instance

<div ng-app= "myApp" ng-controller= "Namesctrl" >
<ul>
<li ng-repeat= "x in Names | by: ' Country ' ">
{x.name + ', ' + X.country}}
</li>
</ul>
<div>

Try»
--------------------------------------------------------------------------------

Filter input
The input filter can be added to the instruction by a pipe character (|) and a filter followed by a colon and a model name.

The filter filter selects a subset from the array:

Angularjs instance

<div ng-app= "myApp" ng-controller= "Namesctrl" >
<p><input type= "text" ng-model= "test" ></p >
<ul>
<li ng-repeat= "x in Names | filter:test | By: ' Country '" >
{{x.name | upperca SE) + ', ' + X.country}}
</li>
</ul>
</div>

Example

<! doctype html> 
The operation effect is as follows:




The date in the demo is angular's built-in filter,spillover is my custom filter, the specific code can see the JS section, or very flexible, the default first parameter is the pipe symbol "|" The string on the left, and the following parameters can be passed through custom filter: passed in.

Add

Built-in filters for Angularjs


Let's take a look at these built-in filter usage methods:

A filter with no parameters
{{expression | filter}}


A filter, with parameters of the case
{{expression | filter:arguments}}


A filter, with multiple parameters of the case
{{expression | filter:arg1:arg2: ...}}


Multiple filters with no parameters
{{expression | filter1 | filter2 | ...}}


Below we use the following ANGULARJS built-in filters

Currency


Currency allows us to set our own currency symbol, which by default takes the currency symbol of the area where the client is placed.
You can use this: {{3600 | currency: ' $￥ '}}
Returns the result to $￥123.00


Number


Number filter formats numbers as text, and its arguments are optional to control the number of bits intercepted after the decimal point
If a non-numeric character is passed in, an empty string is returned
You can use this: {{3600 | number:2}}
The result returned is: 3,600.00


lowercase


Lowercase converts a string to lowercase
You can use this: {{' HEllo ' | lowercase}}}
Returns the result: Hello


Uppercase


Uppercase converts a string to uppercase
You can use this: {{' HEllo ' | uppercase}}}
Returns the result: HELLO


Json


The JSON filter converts a JSON or JavaScript object to a string.
This filter is quite useful for debugging
You can use this: {{{} ' name ': ' Dreamapple ', ' language ': ' Angularjs '} | json}}
The result returned is: {"name": "Dreamapple", "Language": "Angularjs"}


Date


The date filter filters the dates into the format you want, which is a really good filter.
This filter uses a lot of me here to enumerate several commonly used
{{Today | date: ' YYYY-MM-DD '}}
The result is: 2015-15-13
{{Today | date: ' YYYY-MM-DD hh:mm::ss '}}
Results: 2015-18-13 20:18::38
[Online Code] (2015-18-13 20:18::38)