angular（json）

最新推荐文章于 2023-11-29 10:19:15 发布

世间百态不过尔尔

最新推荐文章于 2023-11-29 10:19:15 发布

阅读量1.1k

点赞数

分类专栏： angularjs 文章标签： angular（json）

本文链接：https://blog.csdn.net/weixin_44706842/article/details/88585662

版权

angularjs 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1）json
将对象格式化成一个标准的json字符串
语法:{{对象 | json}}

2）lowercase/uppercase
将字符串转换成小写或大写
语法：{{字符串 | uppercase/lowercase}}

3）number
格式化数字，为数字加上千位分割，比如123,456,789；同时可以接收一个参数，用于指定小数点后保留几位
语法：{{数字 | number:数字}}

4）orderBy
用于为数组进行排序，一般用于处理对象数组
可以接收一个参数来指定排序的规则，参数可以是一个字符串，也可以是一个数组

当参数为数组时，会首先以数组的第一项进行排列，如果根据第一项无法排序，则再去根据第二项进行排序，依次类推

同时可以设置第二个参数，确定排序方式（升序或降序），默认为fasle，表示升序，设置为true时，表示降序

可以在orderBy的属性前加负号(-)，也可以表示降序

二、自定义过滤器
自定义过滤格式
app.filter(“过滤器名”,function(){
return function(待过滤的值,参数1,参数2…){
return 过滤后的值;
}
});
其中的参数1,2是可选的
使用：{{待过滤值 | 过滤器名}}

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="angular.min.js"></script>
</head>
<body ng-app="app">
    {{{name:"张三",age:10} | json}}
    {{"abc" | uppercase}}
    {{"Abc" | lowercase}}、

    {{12344321.123121 | number}}
    {{12213.111 | number:2}}

    <div ng-init="arr = [{name:'abc',age:20},{name:'acd',age:19},{name:'aad',age:29},{name:'bdc',age:17},{name:'bcd',age:23},{name:'afr',age:24},{name:'acd',age:17}]">
        <!-- 以name属性进行排序：属性的比较，首先比较第一个字符，如果相同，再去比较下一个，知道比较出大小 -->
        {{arr | orderBy:"name"}}

        {{arr | orderBy:'age'}}

        <div>
            <ul>
                <!-- 首先以名字进行排序，当名字一样时，按照年龄进行排序 -->
                <li ng-repeat="p in arr | orderBy:['name','age']">{{p.name+"-"+p.age}}</li>
            </ul>
        </div>
        <div>
            <ul>
                <!-- 首先以名字进行排序，当名字一样时，按照年龄进行排序 -->
                <li ng-repeat="p in arr | orderBy:['name','-age']:true">{{p.name+"-"+p.age}}</li>
            </ul>
        </div>
    </div>



    <!-- 自定义过滤器，实现在字符串前添加图标 ☺ -->
    <div>{{"哈哈" | laugh}}</div>

    <!-- 自定义过滤器，实现字符串翻转，再根据用户设置，选择是否转换成大写 -->
    <div>{{"abcd" | reverse:true}}</div>

    <!--自定义过滤器，实现字符串翻转，再根据用户设置，选择是否转换成大写,并在字符串前添加用户指定的修饰符  -->
    <div>{{"hiiuio" | reverseAndDes:true:'√'}}</div>

    <!-- 多个过滤器一起使用 -->
    {{"avxb" | reverse | laugh }}
    <script>

        var app = angular.module('app',[]);
        //不带参数的过滤器
        app.filter("laugh",function(){
            return function(input){
                return "☺"+input;
            }
        });

        //带参数的过滤器
        app.filter("reverse",function(){
            return function(input,flag){
                var s = '';
                //abc
                for (var i = 0; i < input.length; i++) {
                    s = input[i]+s;
                }
                // 需要转换咸大写
                if (flag) {
                    s = s.toUpperCase();
                }

                return s;
            }
        });
        //带多个参数的过滤器
        app.filter("reverseAndDes",function(){
            return function(input,flag,des){
                var s = '';
                //abc
                for (var i = 0; i < input.length; i++) {
                    s = input[i]+s;
                }
                // 需要转换咸大写
                if (flag) {
                    s = s.toUpperCase();
                }

                return des+s;
            }
        })
    </script>
</body>
</html>