Instance parsing angularjs filter

This article introduces the filter of angularjs, and attaches an example to parse it for ease of understanding. It has good reference value. If you need it, you can see that the company uses ionic, which encapsulates Some APIs for webapp Based on angularjs. The filter of angularjs recently used does save a lot of code, let's summarize it now!

Ng is a chicken-ribs filter. Let's take it over here! The following is an example of a filter commonly used in chicken soup.

Lowercase (lower case)

{LastName | lowercase }}

Uppercase (uppercase)

{LastName | uppercase }}

Number)

The number filter can be used to separate a number by thousands. For example, 123,456,789. Receive a parameter at the same time, you can specify the small float type to retain a few decimal places:

{Num | number: 2 }}

Currency (currency processing)

{Num | currency: '￥ '}}

Json (format A json object)

{JsonTest | json }}

The function is the same as JSON. stringify ().

LimitTo (limit the length of an array or string)

{ChildrenArray | limitTo: 3} // The first three items in the array are displayed.

Filter (matching substrings)

It is used to process an array and then filter out the elements containing a substring and return it as a subarray. It can be a string array or an object array. If it is an object array, the attribute value can be matched. It receives a parameter to define the matching rule for the substring.

Html

 
 
 
  
  
Filter matches substrings (the following statements are only for observation)
 
  
  
{WebArr | filter: 'n '}} 
 
  
  
{WebArr | filter: 25 }} 
 
  
  
{WebArr | filter: {name: 'l '}}} 
 
  
  
{WebArr | filter: fun }} 
 
 

Js

$scope.webArr = [   {name:'nick',age:25},   {name:'ljy',age:28},   {name:'xzl',age:28},   {name:'zyh',age:30}  ];$scope.fun = function(e){return e.age>25;};

Effect display:

Filter matches substrings (the following statements are only for observation)

[{"name":"nick","age":25}][{"name":"nick","age":25}][{"name":"ljy","age":28},{"name":"xzl","age":28}][{"name":"ljy","age":28},{"name":"xzl","age":28},{"name":"zyh","age":30}]

Date type

The date filter should be the simplest of common filters!

Yyyy -- indicates the year;

MM -- month (uppercase is required );

Dd -- date;

Hh -- hour;

Mm -- minute (lower case required );

Ss -- seconds;

EEEE-Week;

Hh: mm -- the format is in the 24-hour format;

H: mma-12-hour system;

Here, you can try the year, month, day, hour, minute, second, or!

 
 
 
  
  
8. Date 1
 
  
  
 
  
  
8 days 2
 
  
  
 
  
  
8 days 3
 
  
  
 
  
  
8 date 4
 
  
  
 
 
 

Date 1:

2016/11/19 11:59:05 Saturday

Date 2:

November 19, 2016 PM Saturday

Date 3:

, January 1, November 22, 2016

Date 4:

11:16:58

OrderBy sorting (I personally think the seventh example is the best writing method)

Ng-repeat generates an independent scope, and adds the orderBy sort of pipelines directly after the ng-repeat loop.

It is easy to use, but there are two points to note:

Do not forget the parameter quotation marks;

Parameter format -- directly write as age, instead of item2.age.

3. sort by age (Ascending by default)

 
 
 
  
  
3. sort by age (Ascending by default)
 
  
  
 
 Name  
 
 Age  
 
 Stature  
 
 
 
 

Effect display:

Name ljyage 27 stature 165 name nickage 25 stature 170 name xzlage 27 stature 175 name zyhage 29 stature 165

4. sort by age (descending order if the parameter is true)

 
 
 
  
  
 
 name  
 
 age  
 
 stature  
 
 
 
 

Effect display:

Sort by age (in descending order if the parameter is true) name zyhage 29 stature 165 name xzlage 27 stature 175 name ljyage 27 stature 165 name nickage 25 stature 170

5. I want to sort by age in descending order by height (all in descending order. The results cannot be reached. See the 7th cases)

I wrote ^ * ^ In this naive way.

 
 
 
   
  
  
 
 name  
 
 age  
 
 stature  
 
 
 
 

Effect display:

I want to first sort by age in descending order by height (all in descending order, the effect cannot be reached, see 7th Cases) name zyhage 29 stature 165 name xzlage 27 stature 175 name ljyage 27 stature 165 name nickage 25 stature 170

6. sort by age first by height (multiple parameters are written in array form)

 
 
 
  
  
 
 name  
 
 age  
 
 stature  
 
 
 
 

Effect display:

Sort by age first by height (multiple parameters are written in an array form) name nickage 25 stature 170 name ljyage 27 stature 165 name xzlage 27 stature 175 name zyhage 29 stature 165

7. sort by age in descending order by height (multiple parameters are written in array form)

Add a negative number before the parameter to implement reverse order.

 
 
 
  
  
 
 name  
 
 age  
 
 stature  
 
 
 
 

Effect display:

!! 7 first by age in descending order by height (multiple parameters are written in an array form) name nickage 25 stature 170 name xzlage 27 stature 175 name ljyage 27 stature 165 name zyhage 29 stature 165

I personally think that many built-in ng filters are quite weak. Personalized Requirements custom filters.

Custom Filter

A custom filter returns a function and the function returns the value you want!

Instance:

Angular. module ('youappname', []). filter ('youfiltername', function () {return function () {// your processing code return result; // return the value you want }})

Customize a filter for summation

Html

 
 

  
  
!! 1 sum
  
  
 

 
 

Usage:

All parameters before and after the MPs queue are sum

Js

Var nickAppModule = angular. module ('nickapp', []); nickAppModule // sum. filter ('sumnick ', function () {return function () {var arr = Array. prototype. slice. call (arguments), sum = 0; for (var I = 0, len = arr. length; I
 
  
Arguments -- a set of parameters accepted by the function, an array of classes;
  
Array. prototype. slice. call (arguments)
  
This sentence converts the class array into an array;
  
Sum + = arr [I]? Arr [I]: 0;
  
Sum is equal to the sum of each element in the array. Avoid passing values in the background, and use the User-Defined filer function as the parameter. If the fault tolerance occurs, the system will write 0 insurance.
  
Customize a filter (to retain the two percentage digits after the decimal point)
  
Html
  
   
  
 
    
   
!! 2. Percentage
 
    
   
 Male  
 
    
   
 Female  
 
    
   
 Gay  
 
   
  
  
Usage:
  
The numerator is written in front of the pipeline. All parameters following the pipeline and parameters before the pipeline are denominator.
  
Js
  
Var nickAppModule = angular. module ('nickapp', []); nickAppModule // percentage. filter ('percentnick ', function () {return function () {var arr = Array. prototype. slice. call (arguments), sum = 0; for (var I = 0, len = arr. length; I
   
    
Here is an additional sentence on the filter that sums above:
    
Sum = 0? '0% ': Math. round (arr [0]? Arr [0]: 0)/sum * 10000)/100 + "%"
    
Math built-in function, Math. round rounded to the reserved integer;
    
Multiply the sum by 10000 and divide it by 100. This means that two decimal places are retained.
    
Complete code:
    
 
      Ng filter nick 
     
   
 
      
    
!! 1 sum
 
      
    
 
 
 
     
   
 
     
   
 
      
    
!! 2. Percentage
 
      
    
 Male  
 
      
    
 Female  
 
      
    
 Gay  
 
     
   
 
     
   
 
      
    
3. sort by age (Ascending by default)
 
      
    
 
 Name  
 
 Age  
 
 Stature  
 
 
     
   
 
     
   
 
      
    
4. sort by age (descending order if the parameter is true)
 
      
    
 
 Name  
 
 Age  
 
 Stature  
 
 
     
   
 
     
   
 
      
    
5. I want to sort by age in descending order by height (all in descending order. The results cannot be reached. See the 7th cases)
 
       
      
    
 
 Name  
 
 Age  
 
 Stature  
 
 
     
   
 
     
   
 
      
    
6. sort by age first by height (multiple parameters are written in array form)
 
      
    
 
 Name  
 
 Age  
 
 Stature  
 
 
     
   
 
     
   
 
      
    
!! 7. sort by age in descending order by height (multiple parameters are written in array form)
 
      
    
 
 Name  
 
 Age  
 
 Stature  
 
 
     
   
 
     
   
 
      
    
8. Date 1
 
      
    
 
      
    
2016/11/19 11:59:05 Saturday
 
      
    
8 days 2
 
      
    
 
      
    
November 19, 2016 PM Saturday
 
      
    
8 days 3
 
      
    
 
      
    
, January 1, November 22, 2016
 
      
    
8 date 4
 
      
    
 
      
    
11:16:58
 
     
   
 
{100000 | currency: '￥ '}}
      
 
     
   
 
      
    
Filter matches substrings (the following statements are only for observation)
 
      
    
{WebArr | filter: 'n '}} 
 
      
    
{WebArr | filter: 25 }} 
 
      
    
{WebArr | filter: {name: 'l '}}} 
 
      
    
{WebArr | filter: fun }}