angularjs自定义过滤器

最新推荐文章于 2021-08-11 19:45:32 发布

dancheng_work

最新推荐文章于 2021-08-11 19:45:32 发布

阅读量214

点赞数

分类专栏： # angularjs

本文链接：https://blog.csdn.net/dancheng1/article/details/78178032

版权

angularjs 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

angular.module('myApp',[], function ($filterProvider, $provide, $controllerProvider) {
    $provide.service('Data', function () {
        return [
            {
                name:'张三',
                age:20,
                city:'上海'
            },
            {
                name:'李四',
                age:30,
                city:'北京'
            }
        ]
    });
    //创建过滤器第一种方法
    $filterProvider.register('filterAge', function () {
        return function (obj) {
            var newObj = [];
            angular.forEach(obj, function (o) {
                if(o.age > 20){
                    newObj.push(o)
                }
            })
            return newObj;
        }
    });
    
    $controllerProvider.register('firstController', function ($scope, Data) {
        $scope.data = Data;
    })
    //创建过滤器第二种方法
}).filter('filterCity', function () {
    return function (obj) {
        var newObj = [];
        angular.forEach(obj, function (o) {
            if(o.city === '上海'){
                newObj.push(o)
            }
        })
        return newObj;
    }
})

调用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div ng-app="myApp">
        <div ng-controller="firstController">
            <ul>
                <li ng-repeat="user in data | filterCity">
                    {{user.name}}
                    {{user.age}}
                    {{user.city}}
                </li>
            </ul>
        </div>
    </div>
    <script type="text/javascript" src="../vendor/angular/angularjs.js"></script>
    <script type="text/javascript" src="./app/index.js"></script>
</body>
</html>

dancheng_work

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs自定义过滤器

angular.module('myApp',[], function ($filterProvider, $provide, $controllerProvider) { $provide.service('Data', function () { return [ { name:'张三',
复制链接

扫一扫

专栏目录