angularJS 自定义过滤器

前端之家收集整理的这篇文章主要介绍了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.自定义过滤器方式三 
<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;
        });

    });
原文链接:https://www.f2er.com/angularjs/148730.html

猜你在找的Angularjs相关文章