关闭

AngularJs Filter详解1-内置过滤器

标签: AngularJsfilter
1169人阅读 评论(0) 收藏 举报
分类:

在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>

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:707388次
    • 积分:10186
    • 等级:
    • 排名:第1670名
    • 原创:417篇
    • 转载:145篇
    • 译文:1篇
    • 评论:97条
    最新评论