AngularJs过滤器

1，内置过滤器

• uppercase，lowercase大小转换

{{ "lower cap string" | uppercase }}   //结果：LOWER CAP STRING 
{{ "TANK is GOOD" | lowercase }}     //结果：tank is good

 

• json格式化

{{ {foo: "bar", baz: 23} | json }}  //结果：{ "foo": "bar", "baz": 23 }

 

• date格式化

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

• number格式化

{{ 1.234567 | number:1 }}  //结果：1.2 
{{ 1234567 | number }}    //结果：1,234,567

• currency货币格式化

{{ 250 | currency }}         //结果：$250.00 
{{ 250 | currency:"RMB ￥ " }}    //结果：RMB ￥ 250.00 

• filter查找

{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | filter:'s'}}  //查找含有有s的行 
  
//上例结果：[{"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'} }}  //查找name为iphone的行 
  
//上例结果:[{"age":20,"id":10,"name":"iphone"}] 

 

• limitTo字符串，对像的截取

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

 

• orderBy对像排序

{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | orderBy:'id':true }}    //根id降序排 
  
{{ [{"age": 20,"id": 10,"name": "iphone"}, 
{"age": 12,"id": 11,"name": "sunm xing"}, 
{"age": 44,"id": 12,"name": "test abc"} 
] | orderBy:'id' }}      //根据id升序排 

 

 

2，自定义过滤器

 

例：定义一个过滤器injectFilter，对输入的值进行转换

angular.module("fangular", [])
    .filter('injectFilter', [function() {
        return function(data) {
            if (data == 'Y') {
                return "是";
            } else if (data == 'N') {
                return "否";
            } else {
                return data;
            }
        }
    }]);

 

 3，代码调用内置过滤器

$filter('内置过滤器名')(参数);

 

4，ng中调用过滤器

多个过滤器链：

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

 filter可以接收参数，参数用 : 进行分割，如下：

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