AngularJS入门教程-过滤器（五）

今天，我们来了解一下AngularJS的过滤器。AngularJS的filter分内置的过滤器和自定义的过滤器，这里主要介绍一下AngularJS的内置过滤器。

AngularJS的内置过滤器共有九种，
1、uppercase

开发环境

Sublime Text（建议使用）
AngularJS-1.5.6

示例

AngularJS内置过滤器共有九种，下面我会逐个举例介绍。

1、uppercase 转换成大写

代码：

//html

  {{"angularjs"| uppercase}}

运行结果：

ANGULARJS

代码解释：

过滤器(filter)：

{{"angularjs"| uppercase}}

这里，我们看到在双大括号表达式中，多一个管道符号“｜”，这就是AngularJS的语法，如果需要在表达式中使用过滤器，就需要使用管道符“｜”，从运行结果中，我们可以看到，uppercase过滤器，将小写的字符全部转换成了大写。

2、lowercase 转换成小写

代码：

  {{"ANGULARJS"| lowercase}}

运行结果：

angularjs

代码解释：
不难看出，这个过滤器和上一个过滤器正好相反，是将所有的字符转换成小写。

3、json 转换son格式

代码：

 {{ {name:'abc',sex:0}|json }}

运行结果：

{ "name": "abc", "sex": 0 }

代码解释：

将一个非json格式对象，转换成json格式。

4、date 时间格式化

代码：

 {{1304375948024 | date:"yyyy-MM-dd hh:mm:ss"}}

运行结果：

2011-05-03 06:39:08

5、number 数字格式化

代码：

  {{3.1415 | number:2}}
  

  {{ 1234567 | number }} 

运行结果：

3.14 
1,234,567

代码解释：
这里说明一下，number:2将保留两位小数，自动四舍五入。

6、currency 货币格式化

代码：

        {{ 100 | currency }}  
    
               
    {{ 100 | currency:"¥" }} 

运行结果：

$100.00 
¥100.00

代码解释：
currency过滤器，默认是$，如果想使用其他的货币符号，就需要在currency后加上相应的货币符号，如currency:"¥"

7、filter 查找

代码：

    {{ 
        [{"name":"张三","sex":"男"},
        {"name":"李四","sex":"女"},
        {"name":"王五","sex":"男"}] | filter:{'sex':'女'}
    }} 

运行结果：

[{"name":"李四","sex":"女"}]

代码解释：
根据在过滤器filter中给定的条件filter:{'sex':'女'},在对象数组中，查找符合该条件的对象。

8、limitTo字符串截取，对象截取。

代码：

    {{"abcde"|limitTo:2}}
    {{ 
        [{"name":"张三","sex":"男"},
        {"name":"李四","sex":"女"},
        {"name":"王五","sex":"男"}] | limitTo:1
    }} 

运行结果：

ab
[{"name":"张三","sex":"男"}]

9、orderBy 排序

代码：

升序：
    {{ 
        [{"id":2,"name":"张三","sex":"男"},
        {"id":3,"name":"李四","sex":"女"},
        {"id":1,"name":"王五","sex":"男"}] | orderBy:'id'
    }} 


降序：
{{ 
        [{"id":2,"name":"张三","sex":"男"},
        {"id":3,"name":"李四","sex":"女"},
        {"id":1,"name":"王五","sex":"男"}] | orderBy:'id':true
    }} 

运行结果：

升序：
[{"id":1,"name":"王五","sex":"男"},{"id":2,"name":"张三","sex":"男"},{"id":3,"name":"李四","sex":"女"}]
降序：
[{"id":3,"name":"李四","sex":"女"},{"id":2,"name":"张三","sex":"男"},{"id":1,"name":"王五","sex":"男"}]

至此，AngularJS中内置的过滤器介绍完了。