AngularJs Filter详解1-内置过滤器

在AngularJs中 ，过滤器可以使用一个管道符（|）添加到表达式和指令中  。

angularjs的filter功能可分为二种，一种是内置的过滤器，一种是自定义的。

AngularJs过滤去可用于转换数据。

内置过滤器，如下：

1.大小写转换

    <div class="alert alert-info">
        {{"lower cap string"|uppercase }}<br />
        {{"Tank Is GOOD"|lowercase}}
    </div>

2.json格式化（将对象转换成json字符串）,默认输出就是json字符串

    <div class="help-block">
        {{ {name:'zhangsan',age:15} }}
        <br />
        {{ {name:'zhangsan',age:15 }|json }}
    </div>

3.number格式化

    <div class="alert alert-success">
        {{1.2345|number:1}}
        <br />
        {{1.2345|number:3}}
        <br />
        {{1234567|number}}
    </div>

4.currecy货币格式化

    <div class="panel-body">
        {{500|currency}}
        <br />
        {{250|currency:'RMB ￥ '}}
    </div>

5.date格式化

    <div>
        {{ 1304375948024 |date}}
        <br />
        {{ dateOne |date:'hh:mm:ss'}}
        <br />
        {{ dateTwo |date:'yyyy-MM-dd hh:mm:ss'}}
        <br />
        {{ dateThree |date:'yyyy年MM月dd日'}}
        <br />
    </div>

<script>
    //3. orderBy 过滤器格局表达式排序数组，字典排序可设置正序、倒叙
    //默认升序
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope) {
        $scope.dateOne = new Date();
        console.info(new Date().toJSON());
        $scope.dateTwo = new Date().toJSON();
        // /Date(1464941268937)/
        $scope.dateThree = '1464941268937';
    });
</script>

6.filter查找

    <div class="help-block">
        //查找含有有4的行
        <br />
        {{ [{"age": 20,"id": 10,"name": "iphone"},
        {"age": 12,"id": 11,"name": "sunm xing"},
        {"age": 44,"id": 12,"name": "test abc"}]
         | filter:'4' }}
        <br />
        //查找name含有iphone的行
        <br />
        {{ [{"age": 20,"id": 10,"name": "iphone"},
        {"age": 12,"id": 11,"name": "sunm xing"},
        {"age": 44,"id": 12,"name": "test abc"}] 
        | filter:{'name':'iphone'} }}
    </div>

7.limitTo 字符串或对象的截取

    <div class="alert alert-success">
        {{'i want you'| limitTo:3}}
        <br />
        {{'i want you'| limitTo:-3}}
        <br />
        {{[1,3,5]|limitTo:1}}
        <br />
        {{[1,3,5]|limitTo:-1}}
    </div>

8.orderBy 对象排序

    <div class="panel-body">
        //根id降序排  
        <br />
        {{ [{"age": 20,"id": 10,"name": "iphone"},
        {"age": 12,"id": 11,"name": "sunm xing"},
        {"age": 44,"id": 12,"name": "test abc"}] 
        | orderBy:'id':true }}     
            <br />
        //根据id升序排  
        <br />
        {{[{"age": 20,"id": 10,"name": "iphone"},
        {"age": 12,"id": 11,"name": "sunm xing"},
        {"age": 44,"id": 12,"name": "test abc"}] 
        | orderBy:'id'}}         
    </div>