深究AngularJS——过滤器（filter）

最新推荐文章于 2024-09-05 09:21:15 发布

bug师姐

最新推荐文章于 2024-09-05 09:21:15 发布

阅读量4.4k

点赞数 2

分类专栏： AngularJS angularJS应用详解文章标签： angularjs filter 自定义过滤器 orderBy lowercase

本文链接：https://blog.csdn.net/zcl_love_wx/article/details/51405712

版权

AngularJS 同时被 2 个专栏收录

18 篇文章 1 订阅

订阅专栏

angularJS应用详解

14 篇文章 23 订阅

订阅专栏

写这个的目的是希望能学会如何在指令里加入自己的过滤器。

1.关于过滤器你需要了解这些

1.过滤器的作用：

是将我们的现有的数据进行处理，比如重排序、转换大小写、计算等等，处理完了再返回一个结果。

2.AngularJS自带的过滤器：

过滤器	描述
currency	格式化数字为货币格式。
filter	从数组项中选择一个子集。
lowercase	格式化字符串为小写。
orderBy	根据某个字段属性重新排序。
uppercase	格式化字符串为大写。

3.使用过滤器：

可在如下三个地方使用过滤器，在页面上使用时，通过一个管道符（|）和过滤器名字，

<body>
<div ng-app="myApp" ng-controller="myCtrl"> 
    <!-- 1.在表达式中使用过滤器 -->
    <h1>{{"xywz" | uppercase}}</h1>
    <!-- 2.在指令中使用过滤器 -->
    <p ng-repeat="r in data |orderBy :'time'">{{r.result}}</p>
</div>

<script>
    var app = angular.module('myApp', []);
    //3.控制器中使用过滤器
    app.controller('myCtrl', function($scope, $filter) {
        $scope.data = [{'time':2014,'result':'赚钱了'},{'time':2015,'result':'亏大发了'}] ;
        console.log($filter("orderBy")($scope.data,"time"));
    });
</script>
</body>

2.如何写自己的过滤器（关键）

我以一个将字符串折分成数组的过滤器举例。在页面上需要传两参数时，就在过滤器后面以冒号（:）隔开，如下面要传的分割器；在页面要实现传三个及以上的参数时，我们可以通过在过滤器后面继续加冒号（ :）和参数的格式添加。总结就是，第一个参数是管道符号前面的数据，多个参数时，在过滤器名称后面以冒号隔开。

<body>
<div ng-app="myApp" ng-controller="myCtrl"> 
    <p ng-repeat="r in data | toArray">{{r}}</p>
    <p ng-repeat="r in data2 | toArray:';'">{{r}}</p>
</div>

<script>
    var app = angular.module('myApp', []);
    //控制器
    app.controller('myCtrl', function($scope, $filter) {
        $scope.data ="abc,mn,大山,绿水";
        $scope.data2 ="abc;mn;大山;绿水";//需要给定分割器

    });
    //将字符串分割成数组
    app.filter("toArray",function(){
            return function(data,separator){
                if(data){
                    if(!separator) {
                        separator = ",";//默认逗号分割
                    }
                 return data.split(separator);
                }else{
                    return [];//得到的结果类型始终为数组类型              }
            }
    });
</script>
</body>

3.过滤器中注入服务

<body>
<div ng-app="myApp">
    在过滤器中使用服务:
    <h1>{{255 | myFormat}}</h1>
</div>

<script>
    var app = angular.module('myApp', []);
    //自定义服务
    app.service('hexafy', function() {
        this.myFunc = function (x) {
            return x.toString(16);
        }
    });
    //过滤器
    app.filter('myFormat',['hexafy', function(hexafy) {
        return function(x) {
            return hexafy.myFunc(x);
        };
    }]);
</script>
</body>