AngularJs过滤器

在AngularJS中使用过滤器格式化展示数据，在“{{}}”中使用“|”来调用过滤器，使用“:”传递参数。

1、内置过滤器

• currency:将数值格式化为货币格式

    
默认为美元符号：{{price|currency}}
    
用冒号传值￥：{{price|currency:'￥'}}

将数值格式化为货币

• date：日期格式化，年（y）、月（M）、日（d）、星期（EEEE/EEE）、时（H/h）、分（m）、秒（s）、毫秒（.sss），也可以组合到一起使用。

    
时间：{{now|date:'yyyy-MM-dd h:mm:ss '}}

格式化时间

• filter：在给定数组中选择满足条件的一个子集，并返回一个新数组，其条件可以是一个字符串、对象、函数

    
    
{{items|filter:'s'}}
    
    
{{student|filter:{age:20} }}

过滤字符串和对象

• json:将Javascrip对象转成JSON字符串

    
转化为json对象：{{student|json}}

转化为json

• limitTo:取出字符串或数组的前（正数）几位或后（负数）几位

    
截取数组items的第一个和最后一个元素：{{items|limitTo:1}}，{{items|limitTo:-1}}

Paste_Image.png

• lowercase:将文本转换成小写格式,uppercase:将文本转换成大写格式

    
将str2转化为小写：{{str2|lowercase}}
    
将str1转化为大写：{{str1|uppercase}}

字符串大小写转化

• number：数字格式化，可控制小位位数

  
    
{{str3|number:4}}

Paste_Image.png

• orderBy:对数组进行排序，第2个参数可控制方向

    
{{items|orderBy:'':true}}
    
    
{{student|orderBy:'age':true}}

Paste_Image.png

2、自定义过滤器

当我们内置的过滤器不能满足我们的需求时，我们可以自定义过滤器，AngularJs也支持自定义过滤器。

 app.filter('capitalize',function () {
        return function () {
        }
    });

使用app.filter()方法 自定义过滤器，其中两个参数，一个表示过滤器的名称，一个表示返回的函数，接下来，写一个小Demo来定义一个把英文字符串首字母转化为大写的过滤器。

    
将首字母转化为大写：{{info|capitalize}}

在这里需要传递一个input参数来接收，本来过滤器的哪个竖线就是相当于一个管道，这里的input就相当于传递过来的内容。