Details of Angularjs filter filter

After learning angularjs systematically, I found that some of angularjs's thought root php's module smarty is similar, such as data binding, filter. If you are familiar with smarty, learning angularjs will be easier by 1. This article briefly describes the filter functions of angularjs. The filter functions of angularjs can be divided into two types: one is the built-in filter, and the other is the custom filter.

Filter is used to format data.

The basic prototype of Filter (" similar to the pipe pattern in Linux ") :

{{ expression filter }}

Filter can be used by chaining (i.e. using more than one filter in a row) :

{{ expression filter1 filter2 ... }}

Filter can also specify multiple parameters:

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

1. Built-in filter

1, uppercase, lowercase size conversion

{{ "lower cap string" | uppercase }} // Results: LOWER CAP STRING 
{{ "TANK is GOOD" | lowercase }} // Results: tank is good 

The vertical bar here is one kind of pipe function, and if you are familiar with linux, the pipe function of | root linux here is basically one kind

2, json formatting

{{ {foo: "bar", baz: 23} | json }} // Results: { "foo": "bar", "baz": 23 } 

Note: bza does not have double quotes before formatting, and then converts to json data.

3. date formatting

{{ 1304375948024 | date }} // Results: May 3, 2011 
{{ 1304375948024 | date:"MM/dd/yyyy @ h:mma" }} // Results: 05/03/2011 @ 6:39AM 
{{ 1304375948024 | date:"yyyy-MM-dd hh:mm:ss" }} // Results: 2011-05-03 06:39:08 

4, number format

{{ 1.234567 | number:1 }} // Results: 1.2 
{{ 1234567 | number }} // Results: 1,234,567 

5, currency currency formatting

{{ 250 | currency }} // Results: $250.00 
{{ 250 | currency:"RMB  RMB  " }} // Results: RMB  RMB  250.00 

6, filter search

{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | filter:'s'}} // Find out if s The rows of  
// Results of the above examples: [{"age":12,"id":11,"name":"sunm xing"},{"age":44,"id":12,"name":"test abc"}] 
{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | filter:{'name':'iphone'} }} // To find the name for iphone The rows of  
// The example results :[{"age":20,"id":10,"name":"iphone"}] 

7, limitTo string, interception of an image

{{ "i love tank" | limitTo:6 }} // Results: i love 
{{ "i love tank" | limitTo:-4 }} // Results: tank 
{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | limitTo:1 }} // Results: [{"age":20,"id":10,"name":"iphone"}] 

8, orderBy sort images

{{ expression filter1 filter2 ... }}

0

2. Customize the filter function

I found a basic angularjs mvc framework, phonecat, custom filter is also written on this basis, this framework works well.

Add 1 module

{{ expression filter1 filter2 ... }}

1

2, app. js load this module

{{ expression filter1 filter2 ... }}

2

3. Call in html

{{ "TANK is GOOD" | lowercase |tankreplace}} // Results: ===== is good 

Note: | lowercase |tankreplace pipe commands can be multiple

Above is the site to introduce angularjs filter filter related knowledge, I hope to help you, more about angularjs filter related knowledge please pay attention to this site. Thank you very much!