An instance of ANGULARJS filter Filters _angularjs

Now the company with Ionic, is based on Angularjs encapsulated some APIs for WebApp, the most recent use of the Angularjs filter really saved a lot of code, now summed up!

Ng compared to the chicken filter, here is a pen to take it! Chicken broth commonly used in the filter behind the example.

lowercase (lowercase)

{{ lastName | lowercase }}

Uppercase (capital)

{{ lastName | uppercase }}

Number (formatted numbers)

Number filters can add thousands to a digit, like this, 123,456,789. At the same time receive a parameter, you can specify a small float type to retain several decimal places:

{{ num | number : 2 }}

Currency (currency processing)

{{num | currency : '￥'}}

JSON (formatting a JSON object)

{{ jsonTest | json}}

function is the same as the familiar json.stringify ()

LimitTo (Limit array length or string length)

{{ childrenArray | limitTo : 3 }}  //将会显示数组中的前3项

Filter (matching substring)

is used to process an array, and then it can filter out elements that contain a substring to return as a child array. Can be either 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 rule for the substring.

Html

<ul>
 <li>filter Matching substring (the following notation is just easy to observe) </li>
 <li>{{Webarr | filter: ' n '}} <!-- Matching attribute value contains n--></li>
 <li>{{Webarr | filter:25}} <!--matching attribute value contains 25--></li>
 <li >{{Webarr | filter: {name: ' L '}}} <!--//parameter is an object that matches the--></li> <li>{{Webarr | that contains L in the Name property
 | filter: Fun}} <!--/parameter is a function that specifies the return 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 is just easy to observe)

[{' Name ': ' Nick ', ' Age ':}]
[{' Name ': ' Nick ', ' Age ':}]
[{' name ': ' Ljy ', ' age ': 28},{' name ': ' Xzl ', ' Age ':}]
[{' name ': ' Ljy ', ' age ': 28},{' name ': ' Xzl ', ' age ': 28},{' name ': ' Zyh ', ' Age ': 30}]

Date class

Date filters should be the easiest filter in common use!

• yyyy--indicates the year;
• mm--month (must be capitalized);
• dd--date;
• hh--time;
• mm--points (must be lowercase);
• ss--seconds;
• eeee--Week;
• The hh:mm--form is a 24-hour system;
• H:MMA--12-hour system;
• The year, month, day, time, minute, second or/:-Wait for yourself to make a match!

<ul>
 <li>8 Date 1</li>
 <li ng-bind= "date|date: yyyy/mm/dd hh:mm:ss eeee '" ></li>
 <li>8 Date 2</li>
 <li ng-bind= "date|date: ' YYYY year mm month DD day H:mma eeee '" ></li>
 <li >8 Date 3</li>
 <li ng-bind= "date|date: ' YYYY year mm month DD Day hh when mm minute ss seconds '" ></li>
 <li>8 Date 4< /li>
 <li ng-bind= "date|date: ' Yyyy/mm/dd hh:mm:ss '" ></li>
 </ul>

Display effect of date 1:

2016/11/19 11:59:05 Saturday

Display effect of date 2:

2016年11月19日 12:01PM Saturday

Display effect of date 3:

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

Display effect of date 4:

2016/11/22 11:16:58

Ordered by order (personally think the seventh case best written)

Ng-repeat generates an independent scope scope, which is sorted directly after the Ng-repeat loop by the pipeline by order.

Usage is simple, but there are pits to note two points:

• Parameter quotes don't forget;
• Parameter form-written as age, not written as Item2.age.

3 sorted by age (default ascending)

<ul>
 <li>3 sorted by age (default ascending) </li>
 <li ng-repeat= "item2 in Items2|orderby: ' Aged '" >
  <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:

Sort by age (default ascending)
name Ljy
stature 165
name Nick Age
stature 170
name Xzl Age
stature 175
name Zyh age
stature 165

4 Sort by age (with the argument true, reverse or descending)

<ul>
 <li ng-repeat= "item2 in Items2|orderby: ' Age ': 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:

Sort by age (in descending order of the parameter true)
name Zyh
stature 165
name Xzl age
stature 175
Name Ljy age
stature 165
name Nick Age
stature 170

5 want to first ascending by age in descending order of height (all is descending, can not achieve the effect, see the 7th example)

I've been naïve to write this ^*^

<ul>
 <!--<li ng-repeat= "item2 in Items2|orderby: ' Age ': '-stature '" >-->
 <li ng-repeat= " Item2 in Items2|orderby: ' Age ': ' stature ': 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:

Want to start by age in descending order of height (all in descending order, no effect seen in the 7th example)
name Zyh
stature 165
name Xzl age
stature 175
name Ljy age
stature 165
name Nick Age
stature 170

6 by age in order of height (multiple parameters to write out the array form)

<ul>
 <li ng-repeat= "item2 in items2|orderby:[' age ', ' stature '" ">
  <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:

First by age in order of height (multiple parameters to write array form)
name Nick Age
stature 170
name Ljy age
stature 165
Name Xzl Age
stature 175
name Zyh age
stature 165

7 by age ascending in descending order of height (multiple parameters write out array form)

Add a minus sign before the parameter to achieve the reverse order

<ul>
 <li ng-repeat= "item2 in items2|orderby:[' age ', '-stature '" ">
  <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 first in ascending order by age (write array form with multiple arguments)
name Nick Age
stature 170
name Xzl age
stature 175
name Ljy age
stature 165
name Zyh age
stature 165

I personally think that NG built-in filters are a lot more chicken. Personalize the need for custom filter bar.

Custom Filters

A custom filter is to return a function, and the function returns the value you want!

Instance:

Angular.module (' Youappname ', [])
  . Filter (' Youfiltername ', function () {return
   function () {
   //Your processing code
   return result;//Returns the value you want
   }
  })

A filter that customizes a sum

Html

 <ul>
 <li>!! 1 sum </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 pipe are and

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<len;i++) {
    sum+=arr[i]?arr[i]:0;
   }
   return sum;
   }
  })

The arguments--function accepts a set of parameters, an array of classes;

Array.prototype.slice.call(arguments)

This sentence converts a class array to an array;

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

Sum sum equals each element of the array. Avoid the background for the transfer of values, but also the secondary parameters of the custom filer function as a parameter, fault tolerance written 0 insurance.

Customize a hundred percent filter (for two digits after the decimal point is retained)

Html

<ul ng-repeat= "item1 in Items1" >
 <li>!! 2 percent </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 molecule is written in front of the pipe, with all the parameters behind the pipe and the parameters before the pipe plus the denominator.

Js

var nickappmodule=angular.module (' Nickapp ', []);
 Nickappmodule
//Percent
  . 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 also nan return
   sum==0? ' 0% ': Math.Round ((arr[0]?arr[0]:0)/sum*10000)/100+ "%";
   }
  )

Here is one more sentence on the filter above:

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

The Math built-in function, math.round rounded reserved integers;

Multiply the sum by 10000 divided by 100 to join the percentage number, that is, to retain the two decimal places.

Complete code:

<! DOCTYPE html> 

Above is the entire content of this article, I hope the content of this article for everyone's study or work can bring some help, but also hope that a lot of support cloud Habitat community!