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

js:

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.自定义过滤器方式三 

html:

<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:'张三', age:20, city:'上海' },
                        { name:'李思', age:30, city:'北京' },
                        { name:'王五', age:25, city:'深圳' }
                    ]
                });

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

    });