Detailed Angularjs filter (filter) Usage _angularjs

ANGULARJS filter, the Chinese name "filter" is used to filter the value of variables, or format the output, get their desired results or format dongdong.

Introduction to Filter

Filter is used to format data.

The basic prototype of filter (' | ' similar to the pipe mode in Linux):

{{expression | filter}}

Filter can be used in a chained style (that is, multiple filter is used continuously):

{{expression | filter1 | filter2 | ...}}

Filter can also specify multiple parameters:

{{expression | filter:argument1:argument2: ...}}

First, use in view Template

Apply Filters (filter) in an expression

You need to follow the format as follows:

{{expression | filter}}} {{expression | filters}}

For example: {{a | currency}} output is $12.00

Apply Filters (filter) in output results

The popular point is the superposition of the filter--the output result of the previous filter as the input data source of the latter filter.

You need to follow the format as follows:

{{expression | filter1 | filter2 | ...}} The expression (expression) use Filter1 filter and then use Filter2 filter ...

Filter with parameters

Filter can be followed by one or more parameters to help implement the special requirements, the requirements of filter.

You need to follow the format as follows:

{{expression | filter:argument1:argument2: ...}}

Example: {{1234 | number:2}} = 1,234.00

Second, use ANGLUARJS built-in filter

ANGULARJS provides us with 9 built-in filters.

respectively, currency, date, filter, JSON, LimitTo, uppercase, lowercase, number, by.

The specific usage is described in detail in the ANGULARJS documentation. Here are just a few commonly used.

Currency Filter (currency filter)

currency– is used to convert variables into currency representations

such as: {{amount | currency}}

Uppercase/lowercase Filter (letter case Filter)

Such as:

{{' Lower cap string ' | uppercase}}
<input ng-model= "Userinput" > uppercased: {{userinput | uppercase}}

Date Filter (date filter)

Such as:

{{1304375948024 | date}}
{{1304375948024 | date: ' mm/dd/yyyy @ H:mma '}}

JSON filter

Such as:

{{{foo: ' Bar ', baz:23} | json}}

Use filter in controllers, services, and Drictives

You can use filter in ANGULARJS's controller, service, or driective, where you need to add the dependent filter name to controller, service, or directive dependencies.

Use filter directly in controller so that controller can call filter at the right time according to its own needs

Three, custom filter (filter)

Angularjs Write a custom filter in the form of a ANGULARJS factory service is very similar, must remember that it returns an object or a function can be written, only need a function with more than one parameter.

The format is roughly as follows:

App.filter (' Filter name ', function () {return 

function (object to filter, filter parameter 1, filter parameter 2,...) { 

//... An object that performs business logic code return 

processing;