angularJS 自定义过滤器

本文使用三种方式自定义一个数组过滤器。

数组list:

[
    { name:'张三',age:20,city:'上海' },{ name:'李思',age:30,city:'北京' },{ name:'王五',age:25,city:'深圳' }
]

1.自定义过滤器方式一 （在controller方法内定义一个方法）

html:

<li ng-repeat=" item in list | filter : myFilter1">

var app=angular.module('myApp',[]);
app.controller("myCtrl",function($scope,List){
    $scope.list=List;

    //自定义过滤器 方式一  仅显示年龄小于30岁的人员
    $scope.myFilter1=function(obj){
        if(obj.age < 30){
            return true;
        }return false;
    };
});

2.自定义过滤器方式二 （.filter方法）

html:

<li ng-repeat=" item in list | filterCity">
js:

//自定义过滤器  方式二  不显示上海的人员
    app.filter('filterCity',function(){
        return function (obj){
            var newObj=[];
            angular.forEach(obj,function(o){
                if(o.city != "上海"){
                    newObj.push(o);
                }
            });
            return newObj;
        }
    });

3.自定义过滤器方式三 

<li ng-repeat=" item in list | myfilterAge">
js:
 angular.module('myApp',[],function($filterProvider,$provide,$controllerProvider){

        //自定义过滤器  方式三  仅显示年龄大于等于25岁的人员
        $filterProvider.register('myfilterAge',function(){
            return function (obj){
                var newObj=[];
                angular.forEach(obj,function(o){
                    if(o.age >= 25){
                        newObj.push(o);
                    }
                });
                return newObj;
            }
        });

        //定义服务
        $provide.service('List',function(){
                    return [
                        { name:'张三',city:'深圳' }
                    ]
                });

        //定义控制器
        $controllerProvider.register('myCtrl',List){
            $scope.list=List;
        });

    });

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!