Simple analysis of ANGULARJS filter usage _angularjs

System of learning a bit angularjs, found angularjs some of the ideas of the root of the PHP module Smarty very much like, for example, data binding, filter. If you are more familiar with the smarty, learning Angularjs will be easier, this article to introduce ANGULARJS filter usage detailed, interested friends to study together

Introduction to Filter

Filter is used to format data.

The basic prototype of filter (' | ' similar to the pipe mode in Linux):

Copy Code code as follows:

{{expression | filter}}

Filter can be used in a chained style (that is, multiple filter is used continuously):

Copy Code code as follows:

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

Filter can also specify multiple parameters:

Copy Code code as follows:

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

Angularjs-built Filter

Angularjs built a number of commonly used filter, we Yi Yilai look.

Currencyfilter (currency):

Use: Format currency

Method Prototype:

Copy Code code as follows:

function (amount, currencysymbol, fractionsize)

Usage:

{{| currency}} <!--formatted as currency, the default unit symbol is ' $ ', the decimal default bit-->
{{. | currency: ' ￥ '}} <!--will. Format to currency, use custom unit symbol for ' ￥ ', decimal default bit-->
{{. | currency: ' Chy￥ ':} <!--will. Formatted as currency, using a custom unit symbol of ' Chy￥ ', a decimal point to position, a rounding operation is performed-->
{{. | currency:undefined:0}} <!--formats 12.55 as currency, does not change the unit symbol, and the decimal part is rounded-->

Datefilter (date):

Purpose: Format date

Method Prototype:

Copy Code code as follows:

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 (unit: millisecond) timestamp-->
{{1432075948123 | date: ' mm/dd/yyyy @ H:mma '}}
<!--specify TimeZone as UTC-->
{{1432075948123 | date: ' mm/dd/yyyy @ h:mma ': ' UTC '}}

Filterfilter (Filter):

Use: Filter array

Method Prototype:

Copy Code code as follows:

function (array, expression, comparator)

Usage 1 (parameter expression using string):

 <div ng-init= "Myarr = [{name: ' Tom ', Age:}, {name: ' Tom Senior ', Age:}, {name: ' May ', age:}, {name: ' Jack ', Age:}, {name: ' A '] Lice ', Age:}] ' >
   <!--parameter expression using string, the Full-text search keyword ' a '-->
   <div ng-repeat= ' u in Myarr | filter: ' A ' >
     <p>Name:{{u.name}}</p>
     <p>Age:{{u.age}}</p>
     <br/>
   </div >
 </div>

Usage 2 (Parameter expression use function):

 First, define the Function:myfilter $scope in controller
 . Myfilter = function (item) {return
   item.age = =;
 };
 <div ng-repeat= "U in Myarr | Filter:myfilter ">
   <p>Name:{{u.name}}</p>
   <p>Age:{{u.age}}</p>
   <br />
 </div>

Usage 3 (parameter expression using object):

 <div ng-init= "Myarr = [{name: ' Tom ', Age:}, {name: ' Tom Senior ', Age:}, {name: ' May ', age:}, {name: ' Jack ', Age:}, {name: ' A '] Lice ', Age:}] ">
   <div ng-repeat=" u in Myarr | filter:{age:} ">
     <p>Name:{{u.name}}</p>
     <p>Age:{{u.age}}</p>
     <br/>
   </div>
 </div>

Usage 4 (Specify comparator to True or false):

 <div ng-init= "Myarr = [{name: ' Tom ', Age:}, {name: ' Tom Senior ', Age:}, {name: ' May ', age:}, {name: ' Jack ', Age:}, {name: ' A '] Lice ', Age:}] ' >
   name:<input ng-model= ' yourName '/>
   <!--Specifies that comparator is false or undefined, that is, the default value is not transmitted To match any content in a case-insensitive manner-->
   <!--You can try the comparator of the following code as true,true, case and content need to match-->
   <div ng-repeat= "u In Myarr | Filter:{name:yourname}:false ">
     <p>Name:{{u.name}}</p>
     <p>Age:{{u.age}}</p>
     <br/>
   </div>
 </div>

Usage 5 (Specify Comparator as function):

Defining Function:mycomparator in controller first, this function will match case insensitive content, but unlike comparator false, comparator must match full text
 $ Scope.mycomparator = function (expected, actual) {return
   angular.equals (Expected.tolowercase (), Actual.tolowercase ());
 }
 <div ng-init= "Myarr = [{name: ' Tom ', Age:}, {name: ' Tom Senior ', Age:}, {name: ' May ', age:}, {name: ' Jack ', Age:}, {name: ' A '] Lice ', Age:}] ">
   name:<input ng-model=" YourName "/> <div ng-repeat=
   " u in Myarr | filter:{name: Yourname}:mycomparator ">
     <p>Name:{{u.name}}</p>
     <p>Age:{{u.age}}</p>
     <br/>
   </div>
 </div>

Jsonfilter (JSON):

Method Prototype:

Copy Code code as follows:

Function (object, spacing)

Usage (formatting an object into a standard JSON format):

Copy Code code as follows:

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

Limittofilter (LimitTo):

Method Prototype:

Copy Code code as follows:

function (input, limit)

Usage (select top N Records):

 <div ng-init= "Myarr = [{name: ' Tom ', Age:}, {name: ' Tom Senior ', Age:}, {name: ' May ', age:}, {name: ' Jack ', Age:}, {name: ' A '] Lice ', Age:}] ' >
   <div ng-repeat= ' u in Myarr | limitto: ' >
     <p>name:{{u.name}}
     <p>age : {{u.age}}
   </div>
 </div>

Lowercasefilter (lowercase)/uppercasefilter (uppercase):

Method Prototype:

Copy Code code as follows:

function (String)

Usage:

Has joined the {"WTO" | uppercase}}.
We need {{"Money" | lowercase}}.

Numberfilter (number):

Method Prototype:

Copy Code code as follows:

function (number, fractionsize)

Usage:

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

Orderbyfilter (by):

Method Prototype:

Copy Code code as follows:

function (array, sortpredicate, Reverseorder)

Usage:

 <div ng-init= ' Myarr = [{name: ' Tom ', Age:, Deposit:}, {name: ' Tom ', Age:, Deposit:}, {name: ' Tom Senior ', Age:, Deposit: }, {name: ' May ', Age:, Deposit:}, {name: ' Jack ', Age:, Deposit:}, {name: ' Alice ', Age:, Deposit:}] ' >
   <!--deposit The preceding '-' means deposit This column flashback sort, default to order sort
   parameter reverseorder:true indicates result set flashback display-->
   <div ng-repeat= "u in Myarr | orderby:[" Name ', '-deposit ']:true ' >
     <p>Name:{{u.name}}</p>
     <p>deposit:{{u.deposit}}</p >
     <p>Age:{{u.age}}</p>
     <br/>
   </div>
 </div>

Custom Filter

As with directive, if the built-in filter does not meet your needs, you can of course define a specific filter that belongs to you. Let's make a filter:capitalize_as_you_want of our own, which will capitalize the first letter of the string you entered, the specified index position letter, and the letter you specified.

Method Prototype:

Copy Code code as follows:

function (input, capitalize_index, Specified_char)

Complete Sample code:

<! doctype>  

OK, this article is about the filter in Angularjs, after reading this, we can use the good filter so that the data can be displayed according to our requirements, so that the page becomes more vivid.