Angularjs built-in filter usage learning, angularjs built-in filter

Angularjs built-in filter usage learning, angularjs built-in filter

Several Commonly Used filters are built in angular to simplify our operations.

The filter uses the '|' symbol, which is similar to the pipeline in linux.

1. filter)

Filter can filter data based on conditions, for example:

{{[{name:'coolcao',age:23},{name:'lily',age:20},{name:'tom',age:22}] | filter:'coolcao'}}

Result:

[{"name":"coolcao","age":23}]

Here is to filter the objects containing 'coolcao ', no matter which attribute contains 'coolcao.

For exact filtering, for example, if the name is coolcao, you can use the following:

{{[{name:'coolcao',age:23},{name:'lily',age:22},{name:'tom',age:22}] | filter:{'name':'coolcao'} }}

Note: There must be at least one space between the braces used by the filter object and the braces used by angularjs values (that is, at least one space before the last three braces and the last two braces, otherwise angularjs will parse the error)

2. date: format the date.

In the data returned in the system background, the time field may use the timestamp and Long type. It must be formatted as a string similar to '2017-12-12 12:12:12 'in the page display, use the date filter.

{{1423130269432 | date:'yyyy-MM-dd HH:mm:ss'}}

Display result:

17:57:49

Note: The Long-type Timestamp Field is in milliseconds. If the system background uses the unit of seconds, the angular value must be multiplied by 1000 to the unit of milliseconds. Here, we must determine whether it is a second or a millisecond.

3. number: number formatting

{{ 3.1415926 | number:1 }}{{ 3.1415926 | number:2 }}{{ -3.1415926 | number:2 }}{{ 3 | number:2 }}{{ 0.002 | number:2 }}{{ 0.009 | number:2 }}{{100 | number}}{{1000 | number}}{{1000 | number:2}}

Let's talk about nothing. Let's look at the result directly:

3.13.14-3.143.000.000.011001,0001,000.00

4. orderBy Arrangement

{{[{name:'coolcao',age:23},{name:'lily',age:20},{name:'tom',age:22}] | orderBy:'age'}}

Result:

[{"name":"lily","age":20},{"name":"tom","age":22},{"name":"coolcao","age":23}]

The default value is the ascending order. If you want to reverse the order:

{{[{name:'coolcao',age:23},{name:'lily',age:20},{name:'tom',age:22}] | orderBy:'age':true}}

5. json format

{{[{name:'coolcao',age:23},{name:'lily',age:22},{name:'tom',age:22}] | json}}

Result:

[ { "name": "coolcao", "age": 23 }, { "name": "lily", "age": 22 }, { "name": "tom", "age": 22 } ]

Note: The input is a js object (non-standard json) and the output is a standard json string (Attribute names are enclosed in double quotation marks)

6. case-insensitive conversion: uppercase and lowercase

{{'abc' | uppercase}}

Uppercase ABC

Note: uppercase and lowercase can only filter and convert strings.

7. currency: format the currency

Sometimes we need to display numbers as currencies for easy display. You can use currency to format them.

{{1000 | currency }}{{1000 | currency:"RMB ￥" }}

Display:

$1,000.00RMB ￥1,000.00