Example of parsing angularjs filter

Now the company uses ionic, which encapsulates some APIs based on angularjs for webapp. The angularjs filter recently used has indeed saved a lot of code. Let’s summarize it now!

ng relatively useless filters, let’s just briefly mention them here! Examples of commonly used filters for chicken soup are given below.

lowercase(lowercase)

{{ lastName | lowercase }}

uppercase(uppercase)

{{ lastName | uppercase }}

number (formatted number)

The number filter can add thousands divisions to a number, like this, 123,456,789. At the same time, it receives a parameter, which can specify how many decimal places the small float type should retain:

{{ num | number : 2 }}

currency (currency processing)

{{num | currency : '￥'}}

json(formatted json object)

{{ jsonTest | json}}

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

limitTo (limit array length or string length)

{{ childrenArray | limitTo : 3 }} //The first 3 items in the array will be displayed

filter (matching substring)

is used to process an array, and then filter out elements containing a certain substring and return them 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 to define the matching rule for the substring.

html

<ul>
 <li>filter 匹配子串(以下写法只是方便观察)</li>
 <li>{{ webArr | filter : &#39;n&#39; }} <!--匹配属性值中含有n的--></li>
 <li>{{ webArr | filter : 25 }} <!--匹配属性值中含有25的--></li>
 <li>{{ webArr | filter : {name : &#39;l&#39;} }} <!--//参数是对象，匹配name属性中含有l的--></li>
 <li>{{ webArr | filter : fun }} <!--/参数是函数，指定返回age>25的--></li>
</ul>

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 matching substring (the following writing is only for convenience of 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 class

The date filter should be the simplest among commonly used filters!

yyyy--indicates the year;

MM--month (must be capitalized);

dd--date;

hh--hour;

mm--minutes (must be lowercase);

ss--seconds;

EEEE--week;

hh:mm--the form is 24 Hourly format;

h:mma--12-hour format;

where year, month, day, hour, minute, second or /: - Wait and try to match it yourself!

<ul>
 <li>8 日期1</li>
 <li ng-bind="date|date:&#39;yyyy/MM/dd hh:mm:ss EEEE&#39;"></li>
 <li>8 日期2</li>
 <li ng-bind="date|date:&#39;yyyy年MM月dd日 h:mma EEEE&#39;"></li>
 <li>8 日期3</li>
 <li ng-bind="date|date:&#39;yyyy年MM月dd日 hh时mm分ss秒&#39;"></li>
 <li>8 日期4</li>
 <li ng-bind="date|date:&#39;yyyy/MM/dd hh:mm:ss&#39;"></li>
 </ul>

The display effect of date 1:

2016/11/19 11:59:05 Saturday

The display effect of date 2 :

November 19, 2016 12:01PM Saturday

Display effect of date 3:

November 22, 2016 10:42:09

Display effect of date 4:

2016/11/22 11:16:58

orderBy sorting (personally think the seventh example is the best way to write)

ng -repeat generates an independent scope and adds pipeline orderBy directly after the ng-repeat loop.

The usage is very simple, but there are two pitfalls that need to be paid attention to:

Don’t forget the quotation marks for parameters;

Parameter form--write it directly as age, no need to write it as item2.age.

3 Sort by age (default ascending order)

<ul>
 <li>3 按年龄排序(默认升序)</li>
 <li ng-repeat="item2 in items2|orderBy:&#39;age&#39;">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>

Effect display:

按年龄排序(默认升序)
name ljy
age 27
stature 165
name nick
age 25
stature 170
name xzl
age 27
stature 175
name zyh
age 29
stature 165

4 Sort by age (add parameter true to reverse order or descending order)

<ul>
 <li ng-repeat="item2 in items2|orderBy:&#39;age&#39;:true">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>

Effect display:

按年龄排序(加参数true则为倒序即降序)
name zyh
age 29
stature 165
name xzl
age 27
stature 175
name ljy
age 27
stature 165
name nick
age 25
stature 170

5 I want to sort by age in ascending order and then in descending order by height (all in descending order, which will not achieve the effect) , see Example 7)

I once naively wrote like this^*^

<ul>
 <!--<li ng-repeat="item2 in items2|orderBy:&#39;age&#39;:&#39;-stature&#39;">-->
 <li ng-repeat="item2 in items2|orderBy:&#39;age&#39;:&#39;stature&#39;:true">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>

Effect display:

想先按年龄升序在按身高降序(全是降序了，达不到效果，见第7例)
name zyh
age 29
stature 165
name xzl
age 27
stature 175
name ljy
age 27
stature 165
name nick
age 25
stature 170

6 Sort by age first and then by height (more Parameters are written in array form)

<ul>
 <li ng-repeat="item2 in items2|orderBy:[&#39;age&#39;,&#39;stature&#39;]">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>

Effect display:

先按年龄在按身高排序(多个参数写出数组形式)
name nick
age 25
stature 170
name ljy
age 27
stature 165
name xzl
age 27
stature 175
name zyh
age 29
stature 165

7 First, ascending order by age and then descending order by height (multiple parameters are written in array form)

In the parameters Add a negative sign in front to achieve reverse order

<ul>
 <li ng-repeat="item2 in items2|orderBy:[&#39;age&#39;,&#39;-stature&#39;]">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>

Effect display:

!!7 先按年龄升序在按身高降序(多个参数写出数组形式)
name nick
age 25
stature 170
name xzl
age 27
stature 175
name ljy
age 27
stature 165
name zyh
age 29
stature 165

Personally, I think many of the built-in filters in ng are relatively useless. Customize filters for individual needs.

Custom filter

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

Example:

angular.module('youAppName',[])
  .filter('youFilterName',function(){
   return function(){
   //你的处理代码
   return result;//返回你要的值
   }
  })

Customize a summation filter

html

<ul>
<li>!!1 求和</li>
<li ng-repeat="item1 in items1">
 <div ng-bind="item1.male | sumNick:item1.female:item1.gay"></div>
</li>
</ul>

Usage:

All parameters before and after the pipeline are For and

js

var nickAppModule=angular.module('nickApp',[]);
 nickAppModule
  //求和
  .filter('sumNick',function(){
   return function(){
   var arr=Array.prototype.slice.call(arguments),sum=0;
   for(var i= 0,len=arr.length;i<len;i++){
    sum+=arr[i]?arr[i]:0;
   }
   return sum;
   }
  })

arguments--a collection of parameters accepted by the function, class array;

Array.prototype.slice.call(arguments)

This sentence converts an array-like array into an array;

sum+=arr[i]?arr[i]:0;

The sum sum is equal to the accumulated sum of each element of the array. Avoid passing values ​​in the background and passing secondary parameters to the custom filer function as parameters. When fault-tolerant, write 0 to ensure safety.

Customize a filter to find the percentage (find the percentage with two decimal places)

html

<ul ng-repeat="item1 in items1">
 <li>!!2 求百分比</li>
 <li>
  <b>male</b>
  <i ng-bind="item1.male|percentNick:item1.female:item1.gay"></i>
 </li>
 <li>
  <b>female</b>
  <u ng-bind="item1.female|percentNick:item1.male:item1.gay"></u>
 </li>
 <li>
  <b>gay</b>
  <s ng-bind="item1.gay|percentNick:item1.female:item1.male"></s>
 </li>
 </ul>

Usage:

The numerator is written in The sum of all the parameters in front of the pipeline, after the pipeline and the parameters before the pipeline is the denominator

js

var nickAppModule=angular.module('nickApp',[]);
 nickAppModule
//百分比
  .filter('percentNick',function(){
   return function(){
   var arr=Array.prototype.slice.call(arguments),sum=0;
   for(var i= 0,len=arr.length;i<len;i++){
    sum+=arr[i]?arr[i]:0;
   }
   //0/0也是nan
   return sum==0?&#39;0%&#39;:Math.round((arr[0]?arr[0]:0)/sum*10000)/100+"%";
   }
  })

Here is an extra sentence on the filter for the sum above:

sum==0?'0%':Math.round((arr[0]?arr[0]:0)/sum*10000)/100+"%"

Math built-in function, Math .round rounds to keep integers;

Multiply the sum by 10000 and divide it by 100 to splice the percentage sign, that is, keep two decimal places.

Complete code:

 
 


 

 
!!1 求和
 

  

 
 
 <ul ng-repeat="item1 in items1">
 <li>!!2 求百分比</li>
 <li>
  <b>male</b>
  <i ng-bind="item1.male|percentNick:item1.female:item1.gay"></i>
 </li>
 <li>
  <b>female</b>
  <u ng-bind="item1.female|percentNick:item1.male:item1.gay"></u>
 </li>
 <li>
  <b>gay</b>
  <s ng-bind="item1.gay|percentNick:item1.female:item1.male"></s>
 </li>
 </ul>
 <ul>
 <li>3 按年龄排序(默认升序)</li>
 <li ng-repeat="item2 in items2|orderBy:&#39;age&#39;">
  <div>
  <b>name</b>
  <u ng-bind="item2.name"></u>
  </div>
  <div>
  <b>age</b>
  <i ng-bind="item2.age"></i>
  </div>
  <div>
  <b>stature</b>
  <i ng-bind="item2.stature"></i>
  </div>
 </li>
 </ul>
 

 
4 按年龄排序(加参数true则为倒序即降序)
 

  

  name
  
  
  

  age
  
  
  

  stature
  
  
 
 
 

 
5 想先按年龄升序在按身高降序(全是降序了，达不到效果，见第7例)
 
 

  

  name
  
  
  

  age
  
  
  

  stature
  
  
 
 
 

 
6 先按年龄在按身高排序(多个参数写出数组形式)
 

  

  name
  
  
  

  age
  
  
  

  stature
  
  
 
 
 

 
!!7 先按年龄升序在按身高降序(多个参数写出数组形式)
 

  

  name
  
  
  

  age
  
  
  

  stature
  
  
 
 
 

 
8 日期1
 

 
2016/11/19 11:59:05 Saturday
 
8 日期2
 

 
2016年11月19日 12:01PM Saturday
 
8 日期3
 

 
2016年11月22日 10时42分09秒
 
8 日期4
 

 
2016/11/22 11:16:58
 
 
{{100000|currency:'￥'}}
 

 
filter 匹配子串(以下写法只是方便观察)
 
{{ webArr | filter : 'n' }} 
 
{{ webArr | filter : 25 }} 
 
{{ webArr | filter : {name : 'l'} }} 
 
{{ webArr | filter : fun }} 
 
 
 <script>
 var nickAppModule=angular.module(&#39;nickApp&#39;,[]);
 nickAppModule
  //求和
  .filter(&#39;sumNick&#39;,function(){//管道前后所有参数和
   return function(){
   var arr=Array.prototype.slice.call(arguments),sum=0;
   for(var i= 0,len=arr.length;i<len;i++){
    sum+=arr[i]?arr[i]:0;
   }
   return sum;
   }
  })
  //百分比
  .filter(&#39;percentNick&#39;,function(){//小数点后两位百分比 分子写在管道前面，管道后面的所有参数和加管道前的参数和为分母
   return function(){
   var arr=Array.prototype.slice.call(arguments),sum=0;
   for(var i= 0,len=arr.length;i<len;i++){
    sum+=arr[i]?arr[i]:0;
   }
   //0/0也是nan
   return sum==0?&#39;0%&#39;:Math.round((arr[0]?arr[0]:0)/sum*10000)/100+"%";
   }
  })
 </script>
<script>
 nickAppModule
  .controller(&#39;nickCtrl&#39;,[&#39;$scope&#39;,function($scope){
  $scope.items1=[{
   male:66,
   female:23,
   gay:5,
   other:&#39;xxx&#39;,
   msg:&#39;xxx&#39;
  },
   {
   male:16,
   female:8,
   gay:7,
   other:&#39;xxx&#39;,
   msg:&#39;xxx&#39;
   }];
  $scope.items2=[
   {
   name:&#39;ljy&#39;,
   age:27,
   stature:165
   },
   {
   name:&#39;nick&#39;,
   age:25,
   stature:170
   },
   {
   name:&#39;xzl&#39;,
   age:27,
   stature:175
   },
   {
   name:&#39;zyh&#39;,
   age:29,
   stature:165
   }];
  $scope.date=new Date();
  $scope.webArr = [
   {name:&#39;nick&#39;,age:25},
   {name:&#39;ljy&#39;,age:28},
   {name:&#39;xzl&#39;,age:28},
   {name:&#39;zyh&#39;,age:30}
  ];
  $scope.fun = function(e){return e.age>25;};
  }])
</script>

The above is the entire content of this article. I hope that the content of this article can bring some help to everyone's study or work. I also hope to support the PHP Chinese website!

For more examples of analysis of angularjs filter related articles, please pay attention to the PHP Chinese website!