Angularjs Development FAQs -2 (Angularjs built-in filter)

Several commonly used filter angular are built in to simplify our operations.

The filter uses the ' | ' notation, which is somewhat similar to the pipeline in Linux.

1, filter (filtering)

Filter filters the data according to the criteria, for example:

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

Results: [{"name":"coolcao","age":23}]
This is to filter the object containing ' Coolcao ', regardless of which attribute contains ' Coolcao '.
If you want to filter precisely, for example, as long as 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: The braces used by the filter object and the curly braces used for the Angularjs value are left at least one space (that is, the last three curly braces are the third and the bottom 1, and 22 braces leave at least one space before the ANGULARJS will parse the error);

2. Date: DateTime formatting

In the data returned in the system background, the time field, we may use a timestamp, long, in the page display must be formatted as a string similar to ' 2012-12-12 12:12:12 ', using the date filter can be

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

Show Results:
2015-02-05 17:57:49
Note: The timestamp field for long is measured in milliseconds, and if the system is using the background in seconds, the angular is multiplied by 1000 in milliseconds. It's important to distinguish between seconds and milliseconds.

3, Number: digital format

{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}} 

Results:

3.13.14-3.143.000.000.011001,0001,000.00

4. Arrange By order

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

Results:

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

The default is in ascending order, if you want to reverse:

{{[{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}}

Results:

[ { "name"coolcao", "age23 }, { "name"lily", "age22 }, { "name"tom", "age22 } ]

Note: The input is JS object (non-standard JSON), the output is a standard JSON string (the property name will be double quotation marks)

6, Case conversion: uppercase,lowercase

{{‘abc‘ | uppercase}}

The output of the uppercase ABC
Note: Uppercase,lowercase can only filter conversions on strings

7, Currency: The format of the currency
Sometimes we need to display the numbers in the form of currency, which can be formatted using currency

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

Show:

$1,000.00 RMB ￥1,000.00

8,//parsing backstage to the foreground
, NewLine issue module directive

 module.filter(‘trustHtml‘function ($sce) {        returnfunction (input) {            return$sce.trustAsHtml(input);        }    });

Front desk

<article id="word-display4" ng-bind-html="outsPrintDetailList.strRowAllMoney | trustHtml"></article>

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

Angularjs Development FAQs -2 (Angularjs built-in filter)