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>