Angularjs Study Summary--filter

Introduction

Filter filters are not unfamiliar to us, he and our real-life filters mean the same, its role is to receive a loss

And then output the final result, for example we enter a number, and then we need to get the number in the currency form

According to this, we can use the filter to achieve, Angularjs in the filter is very simple, divided into built-in and custom two, the following small series

Simply introduce some to you.

built-in filters

Ng has built-in filters for: currency (currency), date (date), filter (substring match), JSON (formatted JSON object),

LimitTo (number of limits), lowercase (lowercase), uppercase (uppercase), number (numbers), order by (sort). Total nine kinds. In addition also

You can customize the filter, which is powerful enough to meet any required data processing. Let's look at how they are used.

1. Currency (currency processing)


Using currency, you can format numbers as currency, which is the dollar sign by default, and you can pass in the required symbols yourself, such as when I pass in renminbi:


{{num | currency: ' ￥ '}}


2. Date (dates formatted)


Native JS has limited formatting capabilities for dates, and the date filter provided by Ng basically meets the general formatting requirements. Use the following:


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


The parameters are used to specify the desired format, and y m D H m S E respectively represent the day of the month and the week, and you are free to combine them. can also

Use a different number to limit the number of formatted digits. Other parameters can also use a specific descriptive string, such as "Shorttime", which will take the time grid

12:05 pm for this type of. NG provides eight descriptive strings that I think are a little superfluous, and I can mix it up with my own will.

To the format, do not want to remember so many words ~


3. Filter (matched substring)


This filter, which is called filter (which has to be called, is easy to confuse--! ) is used to process an array, which can then be filtered out

The element containing a substring, returned as a sub-array. Can be an array of strings, or an array of objects. If it is an array of objects, you can match

The value of the property. It receives a parameter that defines the matching rules for the substring. Here is an example to illustrate the use of parameters, I use a few of the special fire now

The child defines an array:

$scope. Childrenarray = [        {name: ' Kimi ', age:3},        {name: ' Cindy ', Age:4},        {name: ' Anglar ', age:4},        {name : ' Shitou ', age:6},        {name: ' Tiantian ', age:5}    ]; $scope. Func = function (e) {return e.age>4;} {{Childrenarray | filter: ' A '}}//Match attribute value contains a in {{Childrenarray | filter:4}}  //Match attribute value contains 4 {{Childrenarray | filter : {name: ' I '}}}//parameter is an object that matches the {{Childrenarray | filter:func}}//parameter that contains I in the name attribute  is a function that specifies the return age>4 of the

4. JSON (format JSON object)


The JSON filter can format a JS object as a JSON string with no parameters. What is the use of this thing, I generally do not output on the page

A JSON string ah, the official website said it can be used for debugging, well, is a good choice. Or, can also be used in JS, the role is familiar with us

The same as Json.stringify (). The usage is super simple:


{{jsontest | json}}


5. LimitTo (Limit array length or string length)


The LimitTo filter is used to intercept an array or string, receive a parameter to specify the length of the Intercept, and if the argument is negative, open from the end of the array

Start interception. Personally think this filter is a little chicken, first only from the beginning/end of the array or string interception, and secondly, JS primitive function can be

To replace it, see how it's used:


{{Childrenarray | limitto:2}}//will display the first two items in the array


6. Lowercase (lowercase)


Convert the data to all lowercase. It's too simple, not much to explain. The same is a very chicken filter, no parameters, can only change the entire string into

lowercase, cannot specify letters. I'm too lazy to write anything.


7. Uppercase (UPPERCASE)


Ditto.


8. Number (formatted numbers)


The number filter can be divided into thousands, like this, 123,456,789. You can also receive a parameter that specifies the float type

Leave several decimals:


{{num | number:2}}


9. Order BY (sort)


The order by filter can sort the elements in an array, receive a parameter to specify the collation, the argument can be a string, the table

The name of the property to be sorted. Can be a function that defines a sort property. It can also be an array, which means that the values of the attributes in the array are sorted sequentially

(If the value of the first comparison is equal, and then the second one), take the example of the child array above:


<div>{{Childrenarray | Order: ' age '}}</div>//Sort by age attribute value, if-age, reverse
<div>{{Childrenarray | Orderby:orderfunc}}</div>//Sort by the return value of the function
<div>{{Childrenarray | Order: [' age ', ' name ']}}</div>//If Age is the same, sort by name


The built-in filters are finished, and I'm almost asleep ... As you can see, Ng's built-in filters are not everything, actually.

Many are more chicken. More personalized requirements require us to define our own filters.

Custom Filters

We need to use the filter in the module to define a function that receives the input value and then passes through a series of processing to return what we want to

The result, such as the following example, implements the value of the returned array as an odd number.

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 let your filter receive parameters, and the parameters are defined

In the return function, the second argument, or more arguments, is also possible.

two ways to use filters

1. Use the filter in the template

We can use filter directly in {{}}, followed by an expression | The syntax for partitioning is as follows:


{{expression | filter}}


You can also use multiple filter, and the output of the previous filter will be the input of the next filter (no wonder the cargo is a pipe-like type.) ）


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


Filter can receive parameters, the parameters are divided by:, as follows:


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


In addition to formatting the data in {{}}, we can also use the filter in the instruction, such as filtering the array arrays first, and then

Loop output:


<span ng-repeat= "A in array | Filter ">

2. Using the filter in Controller and service

We can also use filters in our JS code, the way we are familiar with dependency injection, for example I want to use currency filter in controller

, simply inject it into the controller, and the code is as follows:


App.controller (' TESTC ', function ($scope, currencyfilter) {
$scope. num = Currencyfilter (123534);
}


Using {{num}} in the template can output $123,534.00 directly! Using filter in a service is the same thing.


You may have doubts at this point, if I want to use more than one filter in the controller, is it too much to inject one? Small

Brother Mo Anxious ~ng provides a $filter service to invoke the desired filter, you only need to inject a $filter is enough, use the following method:


App.controller (' TESTC ', function ($scope, $filter) {
$scope. num = $filter (' Currency ') (123534);
$scope. Date = $filter (' Date ') (new Date ());
}


can achieve the same effect. The advantage is that you can easily use different filter.

Summary

The above is about the basic use of filters in Angularjs, are very simple, small series in this collation will be impressed with some, filter

There is nothing difficult to learn, then we can directly query the relevant documents on it.

Angularjs Study Summary--filter