ANGULARJS filter Filters (recommended) _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}}//will display the top 3 items in the array

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:

November 19, 2016 12:01pm Saturday

Display effect of date 3:

November 22, 2016 10:42 09 seconds

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:

3 sorted by age (default ascending)

Name Ljy age
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:

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

Name Zyh age
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:

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

Name Zyh age
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:

6 by age in order of height (multiple parameters to write out the 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 by age ascending in descending order of height (multiple parameters write out array form)

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>  

The above is a small set to introduce the ANGULARJS filter filters, I hope to help you, if you have any questions welcome to my message, small series will promptly reply to everyone, here also thank you for your support cloud Habitat community site!