Analysis on AngularJSFilter usage _ AngularJS

After learning about angularjs, the system found that some ideas of angularjs are similar to the php module smarty, such as data binding and filter. If you are familiar with smarty, it will be easier to learn angularjs. This article will introduce you to angularjsfilter Usage Details. If you are interested, let's take a look at angularjs, it is found that some ideas of angularjs are similar to the php module smarty, such as data binding and filter. If you are familiar with smarty, it will be easier to learn angularjs. This article will introduce you to the usage of angularjs filter. If you are interested, study it together.

Introduction to Filter

Filter is used to format data.

The basic Filter prototype ('|' is similar to the pipeline mode in Linux ):

The Code is as follows:

{Expression | filter }}

Filters can be chained (that is, multiple filters are used continuously ):

The Code is as follows:

{Expression | filter1 | filter2 | ...}}

Filter can also specify multiple parameters:

The Code is as follows:

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

AngularJS built-in Filter

AngularJS has built-in some common filters. Let's take a look at them one by one.

CurrencyFilter (currency ):

Purpose: format the currency.

Method prototype:

The Code is as follows:

Function (amount, currencySymbol, fractionSize)

Usage:

{{| Currency }}
{. | Currency: '￥ '}}
{. | Currency: 'chy ￥ ':}}
{. | Currency: undefined: 0 }}

DateFilter (date ):

Purpose: format the date.

Method prototype:

The Code is as follows:

Function (date, format, timezone)

Usage:

{'1970-05-20T03: 56: 16.887z' | date: "MM/dd/yyyy @ h: mma "}}

{1432075948123 | date: "MM/dd/yyyy @ h: mma "}}

{1432075948123 | date: "MM/dd/yyyy @ h: mma": "UTC "}}

FilterFilter (filter ):

Purpose: Filter Arrays.

Method prototype:

The Code is as follows:

Function (array, expression, comparator)

Usage 1 (the expression parameter uses String ):

 
   
     
     
Name: {u. name }}
     
Age: {u. age }}
     
   
 

Usage 2 (the expression parameter uses function ):

// Define function in Controller: myFilter $ scope. myFilter = function (item) {return item. age == ;};
   
Name: {u. name }}
   
Age: {u. age }}
   
 

Usage 3 (the expression parameter uses object ):

 
   
     
Name:{{u.name}}
     
Age:{{u.age}}
     
   
 

Usage 4 (specify true or false as comparator ):

 
Name:   
     
     
     
Name: {u. name }}
     
Age: {u. age }}
     
   
 

Usage 5 (specify comparator as function ):

// Define function: myComparator in the Controller first. This function will be able to match case-insensitive content, but unlike the case where comparator is false, comparator must match the full text $ scope. myComparator = function (expected, actual) {return angular. equals (expected. toLowerCase (), actual. toLowerCase ());}
Name:   
     
Name: {u. name }}
     
Age: {u. age }}
     
   
 

JsonFilter (json ):

Method prototype:

The Code is as follows:

Function (object, spacing)

Usage (format the object to the standard JSON format ):

The Code is as follows:

{Name: 'jack', age: 21} | json }}

LimitToFilter (limitTo ):

Method prototype:

The Code is as follows:

Function (input, limit)

Usage (select the first N records ):

 
   
     
Name:{{u.name}}     
Age:{{u.age}}   
 

LowercaseFilter (lowercase)/uppercaseFilter (uppercase ):

Method prototype:

The Code is as follows:

Function (string)

Usage:

China has joined the {{ "wto" | uppercase }}.We all need {{ "MONEY" | lowercase }}.

NumberFilter (number ):

Method prototype:

The Code is as follows:

Function (number, fractionSize)

Usage:

{{ "3456789" | number}}
{{ true | number}}
{{ 12345678 | number:1}}

OrderByFilter (orderBy ):

Method prototype:

The Code is as follows:

Function (array, sortPredicate, reverseOrder)

Usage:

 
   
     
     
Name: {u. name }}
     
Deposit: {u. deposit }}
     
Age: {u. age }}
     
   
 

Custom Filter

Like Directive, if the built-in Filter cannot meet your needs, you can define a Filter dedicated to you. Let's make a Filter of our own: capitalize_as_you_want. This Filter will make the first letter of the string you entered, the letters at the specified index position, and the specified letters all uppercase.

Method prototype:

The Code is as follows:

Function (input, capitalize_index, specified_char)

Complete sample code: