Detailed ANGULARJS filter Filter _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 smarty, it will be easier to learn angularjs. This article simply say Angularjs filter function, ANGULARJS filter function can be divided into two kinds, one is the built-in filter, one is custom.

Filter is used to format data.

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

{{Expression filter}}

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

{{expression filter1 filter2 ...}}

Filter can also specify multiple parameters:

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

One, built-in filter

1,uppercase,lowercase size Conversion

{{' Lower cap string ' | uppercase}}//Result: Lower cap string 

The vertical line here is a pipe function, if you are familiar with Linux, this piece of the | root Linux pipeline function, the basic is the same

2,json format

Note: The BZA has no double quotes before formatting and is converted to JSON data after formatting.

3,date format

{{1304375948024 | date}}/Result: May 3 
{1304375948024 | date: ' mm/dd/yyyy @ h:mma '}}//Results: 05/03/2011 @ 6:39am 

4,number format

{{1.234567 | number:1}}/Result: 1.2 

5,currency Currency format

{{currency}}//Result: $250.00 

6,filter Find

{{[{' Age ': "id": "Name": "iphone"}, 
{"Age":, "id": one, "name": "Sunm Xing"}, 
{"Age": "," id ":", "name": "Test ABC"} 
] | Filter: ' s '}//Find rows containing S/ 
//Previous results: [{"Age": "id": one, "name": "Sunm Xing"},{"Age": "," id ":", "name": "Test abc"}] 
{{[{' Age ': "id": "Name": "iphone"}, 
{"Age":, "id": one, "name": "Sunm Xing"}, 
{"Age":, "id": 12, " Name ":" Test ABC "} 
] | filter:{' name ': ' iphone '}}//Find name for iphone line 

7,limitto string, interception of the image

{{"I love Tank" | limitto:6}}/Result: I love 
{{"I love Tank" | limitto:-4}}//Result: Tank 
{{[{"Age":], "id": 10, " Name ":" iphone "}, 
{" Age ": one," id ": one," name ":" Sunm Xing "}, 
{" Age ":", "id": "," name ":" Test ABC "} 

8,orderby sort of image

{{[{' Age ': "id": "Name": "iphone"}, 
{"Age":, "id": one, "name": "Sunm Xing"}, 
{"Age": "," id ":", "name": "Test ABC"} 
] | By: ' ID ': true}}//root ID descending order 
{{{' age ': #, ' id ': ' name ': ' iphone '}, 
{' age ': one, ' id ': one, ' name ': ' Sunm xing ' }, 
{"Age":, "id":, "name": "Test ABC"} 

Second, the custom filter function

I found a basic ANGULARJS MVC framework, Phonecat, and the custom filter is written on this basis, and the framework is pretty handy.

1,filters.js Add a module

Angular.module (' Tanktest ', []). Filter (' Tankreplace ', function () {return 
function (input) { 
return Input.replace (/tank/, "=====") 
}; 

Load this module in 2,app.js

var Phonecatapp = angular.module (' Phonecatapp ', [ 
' Ngroute ', 
' phonecatcontrollers ', 
' Facebookcontrollers ', 
' tanktest ' 

Called in 3,html

Note: | Lowercase |tankreplace Pipeline command can have multiple

The above is a small set to introduce the ANGULARJS filter filter related knowledge, hope to help you, more about ANGULARJS filter related knowledge Please pay attention to cloud Habitat community website. Thank you!