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;        });    });