angularJS 自定义过滤器

来源：互联网发布：网络打鱼赌博案编辑：程序博客网时间：2024/06/04 19:09

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

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

0 0