AngularJS from beginner to proficient (filter filter)

Filters (filter), hence the name Incredibles, the source data through the specific rules, converted to the required data format, this rule, we collectively referred to as filters.

The filter function of the AngularJs is very powerful and easy to use. It makes it easy to group, query, sort, and convert data, and it allows you to customize filters for more complex functions.

format: {{expression | filter}} or {{expression | filter1 | filter2 | Filter3 ...}} or {expression | filter:argument1:argument2 :... }}

Common built-in filter:

• Currency: Currency symbol formatting, the default is the dollar sign $, you can customize the renminbi symbol ￥, etc., use the following:

[HTML]View Plaincopy

1. {{| Currency: ' ￥ '}}

output 100￥

• Uppercase/lowercase string uppercase/lowercase conversions

[HTML]View Plaincopy

1. <span style="font-size:10px;">{"Angularjs" | uppercase}}</span>  

Output ANGULARJS

• Data: Format from date

[HTML]View Plaincopy

1. {{date | date: ' YYYY-MM-DD hh:mm:ss '}}

• LimitTo limit array or string length

[HTML]View Plaincopy

1. {{array | limitto:2}}

The above example is the first two elements of the output array [HTML]View Plaincopy

1. {"Angularjs" | limitto:2}}

Output character first two bits, an

• Number numbers formatted

[HTML]View Plaincopy

1. {"123.45678" | number:2}}

Output to two digits after decimal point: 123.45

• ORDER BY: The array elements are sorted by the specified elements, and can be ordered in ascending or descending order, or, if not specified, by default in ascending order.

[HTML]View Plaincopy

1. <UI ng-repeat="Person in Persons | Orderby:name ">  
2. <Li>{{Person.name}}</Li>  
3. <Li>{{Person.age}}</Li>  
5. </ UI >   

Where by modifying before the parameter plus-can be sorted in descending order, as follows:

orderBy:‘-name‘

• Filter

Custom Filter:

The custom method of filter uses the module's filter method, which returns a function that receives the input value and returns the processed result. The following example defines a filter that returns an odd-numbered element in an array with the following code:

App.filter (' Odditems ', function () {    return function (inputarray) {        var array = [];        for (Var i=0;i<inputarray.length;i++) {            if (i%2!==0) {                array.push (inputarray[i]);            }        }        return array;    }});

The format is this, and your processing logic is written in the inner closure function. You can also have your filter receive parameters, the parameters are defined in the return function, as the second parameter, or more parameters can also.

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

AngularJS from beginner to proficient (filter filter)