Detailed explanation of AngularJS Filter usage_AngularJS

AngularJS's filter, the Chinese name "filter" is used to filter the value of variables, or format the output to get the desired results or formats.

Filter Introduction

Filter is used to format data.

Basic prototype of Filter (‘|’ is similar to pipe mode in Linux):

{{ expression | filter }}

Filter can be used in a chain (that is, multiple filters are used continuously):

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

Filter can also specify multiple parameters:

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

1. Use
in View Template

Apply Filters to expressions

The format needs to be as follows:

{{ expression | filter }} i.e. {{ expression | filter }}

For example: {{ 12 | currency }} outputs $12.00

Apply Filters to the output results

To put it simply, it is the superposition of Filters - the output result of the previous filter is used as the input data source of the next filter.

The format needs to be as follows:

{{ expression | filter1 | filter2 | ... }} That is, the expression (expression) is filtered by filter1 and then filtered by filter2...

Filter with parameters

Filter can be followed by one or more parameters to help implement special requirements and required filters.

The format needs to be as follows:

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

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

2. Use AngluarJS built-in Filter

AngularJS provides us with 9 built-in filters

They are currency, date, filter, json, limitTo, uppercase, lowercase, number, orderBy.

The specific usage is detailed in the AngularJS documentation. Here are just a few commonly used ones.

currency filter

currency – used to convert variables into currency representation

For example: {{ amount | currency}}

uppercase/lowercase filter (letter case filter)

For example:

{{ "lower cap string" | uppercase }}
fcbbd4a13634f09c2ee795fc4c18ad01 Uppercased: {{ userInput | uppercase }}

date filter (date filter)

For example:

{{ 1304375948024 | date }}
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }}

json filter

For example:

{{ {foo: "bar", baz: 23} | json }}

Use filters in controllers, services and criticals

You can use filter in AngularJS controller, service or directive. At this time, you need to add the dependent filter name to the dependency of controller, service or directive.

Use the filter directly in the controller, so that the controller can call the filter according to its own needs

3. Custom filter (filter)

The form of writing custom filters in AngularJS is very similar to AngularJS's factory service. You must remember that it returns an object or a function. When writing, you only need a function with more than one parameter.

The format is roughly as follows:

app.filter('filter(过滤器)名称',function(){ 
return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){ 
//...执行业务逻辑代码 
return 处理后的对象; 
}
});