ANGULARJS Filter Usage Detailed

Filter Introduction

Filter is used to format the data.

The basic prototype of filter (' | ' is similar to the pipeline pattern in Linux):

{{expression | filter}}

Filter can be used chained (that is, multiple filter is used consecutively):

{{expression | filter1 | filter2 | ...}}

Filter can also specify multiple parameters:

{{expression | filter:argument1:argument2: ...}}

Angularjs Built-in filter

Angularjs has built some commonly used filter, we hit look.

Currencyfilter (currency):

Purpose: Format currency

Method Prototypes:

function (amount, currencysymbol, fractionsize)

Usage:

1 {{| currency}}  <!--<!--<!--<!-- format 12.55 as currency without changing the unit symbol, and the decimal part will be rounded - 

Datefilter (date):

Purpose: Format date

Method Prototypes:

function (date, format, timezone)

Usage:

<!-- use ISO standard date format-->{{' 2015-05-20t03:56:16.887z ' | date: ' mm/dd/yyyy @ H:mma '}}<!--  Use 13-bit (in milliseconds) timestamp-->{{1432075948123 | date: "MM/DD/YYYY @ H:mma"}}<!-- Specify TimeZone as UTC-->{{ 1432075948123 | Date: "Mm/dd/yyyy @ h:mma": "UTC"}}    

Filterfilter (Filter):

Purpose: Filter Array

Method Prototypes:

function (array, expression, comparator)

Usage 1 (parameter expression uses string):

1<Divng-init="Myarr = [{name: ' Tom ', age:20}, {name: ' Tom Senior ', age:50}, {name: ' May ', age:21}, {name: ' Jack ', age:20}, {name: ' Alice ', a GE:22}] ">2<!-- parameter expression using string, full-Text search keyword ' a '-->3 <div ng-repeat="U in Myarr | Filter: ' A ' ">4 <p>name:{{u.name}}</p>5 <p>age:{{u.age}}< /p>6 <br/>7 </div>8 </div>     

Usage 2 (parameter expression uses function):

1//define Function:myfilter 2 $scope in controller first. Myfilter = function (item) {3     return item.age = = = 4}; 5   <ng-repeat="U in Myarr | Filter:myfilter "> 7     <p>name:{{u.name}}</<p>age:{{u.age}}</ <</div>           

Usage 3 (parameter expression uses object):

1<Divng-init="Myarr = [{name: ' Tom ', age:20}, {name: ' Tom Senior ', age:50}, {name: ' May ', age:21}, {name: ' Jack ', age:20}, {name: ' Alice ', a GE:22}] ">2<div ng-repeat="U in Myarr | FILTER:{AGE:21} ">3 <p>name:{{u.name}}</p>4 <p>age:{{u.age}}  </p>5 <br/>6 </div>7 </div>    

Usage 4 (Specify comparator to True or false):

1<Divng-init="Myarr = [{name: ' Tom ', age:20}, {name: ' Tom Senior ', age:50}, {name: ' May ', age:21}, {name: ' Jack ', age:20}, {name: ' Alice ', a GE:22}] "> 2 Name:<InputNg-model="YourName"/> 3<!--Specifies that comparator is false or undefined, which is a default value that does not pass, and will match any content in a case-insensitive manner-4<!-- can try the comparator of the code below to True,true is case and the content needs to be exactly matched--5 <div ng-repeat=  "U in Myarr | Filter:{name:yourname}:false "> 6 <p>name:{{ U.name}}</p> 7 < p>age:{{u.age}}</ p> 8 <br/> 9 </div>10 </ DIV>            

Usage 5 (Specify Comparator as function):

 1The function:mycomparator is defined in the controller first, and this function will match the case-insensitive content, but unlike comparator false, comparator must match the full-text2 $scope. Mycomparator =function(expected, Actual) {3Return Angular.equals (Expected.tolowercase (), actual.tolowercase ());4}56 <div ng-init="Myarr = [{name: ' Tom ', age:20}, {name: ' Tom Senior ', age:50}, {name: ' May ', age:21}, {name: ' Jack ', age:20}, {name: ' Alice ', a GE:22}] ">7 Name:<input ng-model= "YourName"/> 8 <div ng-repeat=  "U in Myarr | Filter:{name:yourname}:mycomparator "> 9 <p>name : {{U.name}}</p>10 < p>age:{{u.age}}</ p>11 <br/>12 </div>13 </ DIV>            

Jsonfilter (JSON):

Method Prototypes:

function (object, spacing)

Usage (Format the object as a standard JSON format):

{{{name: ' Jack ', age:21} | json}}

Limittofilter (LimitTo):

Method Prototypes:

function (input, limit)

Usage (select top N Records):

<ng-init="Myarr = [{name: ' Tom ', age:20}, {name: ' Tom Senior ', age:50}, {name: ' May ', age:21}, {name: ' Jack ', age:20}, {name: ' Alice ', age:22}] ">2     <ng-repeat=<<</</ div>        

Lowercasefilter (lowercase)/uppercasefilter (uppercase):

Method Prototypes:

function (string)

Usage:

China has joined the {{"WTO" | uppercase}}. We all need {{' Money ' | lowercase}}.

Numberfilter (number):

Method Prototypes:

function (number, fractionsize)

Usage:

{{"3456789" | number}} <br/>{{true | number}}<br/>{{12345678 | number:1}}   

Orderbyfilter (by the following):

Method Prototypes:

function (array, sortpredicate, Reverseorder)

Usage:

1<Divng-init="Myarr = [{name: ' Tom ', Age:20, deposit:300}, {name: ' Tom ', Age:22, deposit:200}, {name: ' Tom Senior ', Age:50, deposit:200 }, {name: ' May ', age:21, deposit:300}, {name: ' Jack ', age:20, deposit:100}, {name: ' Alice ', age:22, deposit:150}] "> 2<!--Deposit front '-' means deposit this sort of flashback sequence, default to sequential sort 3 parameter reverseorder:true indicates result set flashback display-4<Divng-repeat="U in Myarr | orderby:[' name ', '-deposit ']:true ' > 5 <p>name:{{u.name}}</p> 6 <p> Deposit:{{u.deposit}}</p> 7 <p>age:{{u.age}}</p> 8 <  br/> 9 </div>10 </div>         

Custom Filter

As with directive, if the built-in filter does not meet your needs, you can certainly define a filter that belongs to you. Let's make a filter:capitalize_as_you_want of our own, the filter causes the first letter in the string you enter, the specified index position letter, and the specified letter all uppercase.

Method Prototypes:

(Input, Capitalize_index, Specified_char)

The complete sample code:

1<!Doctype> 2<Html> 3<Head> 4<ScriptSrc="/scripts/angular.js" ></Script> 5<ScriptType="Text/javascript" > 6 (function () {7var app = Angular.module (‘Ngcustomfiltertest ', []);89 App.filter (‘Capitalize_as_you_want ',function () {10Returnfunction (Input, Capitalize_index, Specified_char) {One input = input | |‘‘;12var output =‘‘;1314var customcapindex = Capitalize_index | | -1;1516var Specifiedchar = Specified_char | |‘‘;1718for (var i =0; i < input.length; i++) {19//The initial letter must be uppercase, and the letter of the specified index is capitalized.20if (i = = =0 | | i = = = Customcapindex) {Output + = Input[i].touppercase ();22}23else {24//The specified letter is also capitalized25if (Specified_char! ="&& input[i] = = = Specified_char) {-Output + = Input[i].touppercase ();27}28else {Output + = Input[i];30}31}32}3334return output;35};36});3738}) ();39 </script>40 </head>41 < body ng-app= " Ngcustomfiltertest ">42 <input ng-model= "Yourinput" type=  "text" >43 <br/>44 Result: {{ Yourinput | Capitalize_as_you_want:3: ' B '}}45 </body>46 </HTML>        

Well, this article tells the filter in the ANGULARJS, after reading this, we can make use of the filter is very convenient to enable the data can be displayed according to our requirements, so that the page becomes more vivid.

ANGULARJS Filter Usage Detailed