angularJS1笔记-(6)-自定义过滤器

html:

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div ng-app="myApp">
    <div ng-controller="firstController">
        <ul>
            <!--这里用到了自定义的过滤器filterAge-->
            <li ng-repeat="user in data | filterAge">
                {{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>

<script>
</script>

</body>
</html>
复制代码

js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
angular.module('myApp', [], function ($filterProvider, $provide, $controllerProvider) {
 
    //注册service
    $provide.service('Data', function () {
        return [
            {
                name: "张三1",
                age: 21,
                city: "北京"
            },
            {
                name: "张三2",
                age: 22,
                city: "北京"
            },
            {
                name: "张三3",
                age: 23,
                city: "上海"
            },
            {
                name: "张三4",
                age: 24,
                city: "北京"
            },
        ];
    });
 
    //注册filter
    $filterProvider.register('filterAge', function () {
        return function (obj) {
          var newObj = [];
          angular.forEach(obj,function (o) {
              //过滤出年龄大于22岁的
             if(o.age>22){
                 newObj.push(o);
             }
          });
          return newObj;
        };
    });
 
    //注册controller
    $controllerProvider.register('firstController', function ($scope, Data) {
        $scope.data = Data;
    });
});

  运行结果:

 补充:传多个参数的过滤器

html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义过滤器复习</title>
    <script type="text/javascript" src="../../vendor/angular/angularJs.js"></script>
</head>
<body ng-app="app">
<div>
    <!--过滤器的参数就是前面穿进去的参数-->
    <h1>{{ true | checkmark }}</h1>
    <h1>{{ false | checkmark }}</h1>
    <input type="text" placeholder="请输入你的体重" ng-model="yourWeight">
    <h2>体重:{{yourWeight}}kg</h2>
    <!--过滤器如果要传入第二个参数就在过滤器后面加一个:-->
    <h2>评测:{{yourWeight|weightFilter:"张三"}}</h2>
</div>
<script>
    angular.module('app', [])
        .filter('checkmark', function () {
            return function (input) {
                return input ? '\u2713' : '\u2718';
            }
        })
        .filter('weightFilter', function () {
            return function (input,inputTwo) {
                if (input < 50) {
                    return inputTwo + "偏瘦";
                } else if (input >= 100) {
                    return inputTwo + "偏胖";
                } else {
                    return inputTwo + "正常";
                }
            }
        })
</script>
</body>
</html>

  执行结果:

 

posted @   My Way!  阅读(329)  评论(0编辑  收藏  举报
编辑推荐:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
阅读排行:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
点击右上角即可分享
微信分享提示