As its name suggests, the filter is to receive an input, process it through a certain rule, and then return the processed result. It is mainly used in the format of data, such as obtaining a subset in an array, sorting elements in an array, etc. ng has some filters built in, which are: currency, date, filter (substring matching), json (formatting json objects), limitTo (limiting the number), lowercase (lowercase), uppercase (uppercase), number (number), orderBy (sorting). There are nine types in total. In addition, you can also customize filters, which is powerful and can meet any requirements for data processing.
The content of the filter is very simple. As long as you understand how to use the built-in and how to define a filter by yourself, it will be OK. Today I learned the system and will introduce it below.
Two ways to use filter
1. Use filter in templates
We can use filter directly in {{}}, followed by the expression and split it with |. The syntax is as follows:
{{ expression | filter }}
You can also use multiple filters in conjunction, and the output of the previous filter will be used as the input of the next filter (no wonder this product is the same as the pipeline.)
{{ expression | filter1 | filter2 | ... }}
Filter can receive parameters, and the parameters are divided by: as follows:
{{ expression | filter:argument1:argument2:... }}
In addition to formatting the data in {{}}, we can also use filters in instructions, such as filtering the array array first, and then looping out the output:
<span ng-repeat="a in array | filter ">
2. Use filter in controller and service
We can also use filters in our js code, which is the dependency injection we are familiar with. For example, if I want to use a currency filter in a controller, just inject it into the controller. The code is as follows:
('testC',function($scope,currencyFilter){
$ = currencyFilter(123534);
}
Use {{num}} in the template to output $123,534.00 directly! The same is true for using filter in services.
At this time, you may have doubts. If I want to use multiple filters in the controller, would it take to inject one by one? Wouldn't it be too difficult? Don't worry, little brother~ng provides a $filter service to call the required filter. You only need to inject a $filter. The usage method is as follows:
('testC',function($scope,$filter){
$ = $filter('currency')(123534);
$ = $filter('date')(new Date());
}
The same effect can be achieved. The advantage is that you can easily use different filters.
ng's built-in filter
ng has nine built-in filters, and the usage method is very simple. You can understand it by reading the documentation. However, in order not to read through its documents in the future, I will make a detailed record here.
1. currency (currency processing)
Use currency to format numbers as currency, the default is the dollar sign, you can pass in the required symbol yourself, for example, I pass in RMB:
{{num | currency : '￥'}}
2. date (date formatting)
The native js has limited formatting capabilities for dates, and the date filter provided by ng can basically meet general formatting requirements. The usage is as follows:
{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}
Parameters are used to specify the desired format. y M d h m s E represents year, month, day, hour, minute, second, week, respectively, and you can freely combine them. Different numbers can also be used to limit the number of formatted bits. In addition, the parameters can also use specific descriptive strings, such as "shortTime" that will format the time as 12:05 pm. ng provides eight descriptive strings. I personally think these are a bit redundant. I can combine the desired format according to my own wishes and don’t want to memorize so many words~
3. filter (match substring)
This filter (I have to say that this name is really confusing -!) is used to process an array, and then the elements containing a certain substring can be filtered out and returned as a subarray. It can be an array of strings or an array of objects. If it is an array of objects, the value of the attribute can be matched. It receives a parameter that defines the matching rules for the substring. Here is an example to illustrate the usage of parameters. I used several children who are particularly popular to define an array:
$ = [
{name:'kimi',age:3},
{name:'cindy',age:4},
{name:'anglar',age:4},
{name:'shitou',age:6},
{name:'tiantian',age:5}
];
$ = function(e){return >4;}
{{ childrenArray | filter : 'a' }} //The matching attribute value contains a{{ childrenArray | filter : 4 }} //The matching attribute value contains 4{{ childrenArray | filter : {name : 'i'} }} //The parameter is an object, matching the name attribute containing i{{childrenArray | filter : func }} //Parameters are functions，Specify returnage>4of
4. json (formatting json object)
The json filter can format a js object into a json string without parameters. What's the use of this thing? I usually don't output a json string on the page. The official website says it can be used for debugging. Well, it's a good choice. Alternatively, it can also be used in js, and its function is the same as we are familiar with (). Super simple usage:
{{ jsonTest | json}}
5. limitTo (limit the array length or string length)
The limitTo filter is used to intercept an array or string, and receives a parameter to specify the length of the intercept. If the parameter is a negative value, it starts from the end of the array. I personally think this filter is a bit useless. First of all, it can only be intercepted from the beginning/end of an array or string. Secondly, js native functions can replace it. Let's see how to use it:
{{ childrenArray | limitTo : 2 }} //The first two items in the array will be displayed
6. lowercase (lowercase)
Convert data to all lowercase. Too simple, I won't explain much. It is also a very useless filter. It has no parameters and can only turn the entire string into lowercase and cannot specify letters. I'm too lazy to write it no matter how I use it.
7. uppercase (caps)
Same as above.
8. number (formatted numbers)
The number filter can be split to a number with thousands, like this, 123,456,789. Receive a parameter at the same time, and you can specify how many decimal places to retain:
{{ num | number : 2 }}
9. orderBy(sort)
The orderBy filter can sort elements in an array and receive a parameter to specify the sorting rules. The parameter can be a string that indicates sorting by the attribute name. It can be a function that defines sorting properties. It can also be an array that means sorting by the attribute values in the array in turn (if the values compared by the first item are equal, then compare by the second item), or take the above child array as an example:
<div>{{ childrenArray | orderBy : 'age' }}</div> //Sort by age attribute value. If it is -age, the order will be reversed.<div>{{ childrenArray | orderBy : orderFunc }}</div> //Sort by the return value of the function<div>{{ childrenArray | orderBy : ['age','name'] }}</div> //ifagesame，according tonameSorting
The built-in filter has been introduced, and I am almost asleep when I write it. . . As you can see, the built-in filters in ng are not omnipotent, and in fact many of them are a bit useless. For more personalized needs, we need to define our own filters. Let’s take a look at how to customize filters.
Custom filters
The customization method of filter is also very simple. Use the filter method of module to return a function that receives the input value and returns the processed result. Without further ado, let’s write one. For example, I need a filter that can return elements in an array with odd subscripts, the code is as follows:
('odditems',function(){
return function(inputArray){
var array = [];
for(var i=0;i<;i++){
if(i%2!==0){
(inputArray[i]);
}
}
return array;
}
});
This is the format, and your processing logic is written in the internal closure function. You can also let your filter receive parameters, and the parameters are defined in the return function, as the second parameter, or more parameters.
That's all the basics of filters. As I said, more things that need to be learned need to be real tests of projects. So, before the project comes, lay a solid foundation~
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.