AngularJS学习记录-过滤器(自定义过滤器)

最新推荐文章于 2025-02-28 11:48:14 发布

原创最新推荐文章于 2025-02-28 11:48:14 发布 · 503 阅读

0 ·

CC 4.0 BY-SA版权

Angular学习专栏收录该内容

11 篇文章

订阅专栏

本文介绍如何在AngularJS中创建自定义过滤器，通过一个具体示例展示了如何筛选年龄在特定范围内的学生数据，并可以根据性别进一步过滤。

AngularJS学习记录-过滤器(自定义过滤器)

除了调用AngularJS中自带的过滤器外，还可以自定义过滤器。定义过滤器的方法很简单，只需要在页面模板中注册一个过滤器的构造方法，该方法将返回一个以输入值为首个参数的函数，在函数体中实现过滤器的功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ng-repeat</title>
    <script src="../js/angular.min.js"></script>
    <style>
        body{
            font-size:12px;
        }
        ul{
            list-style-type: none;
            width: 408px;
            margin:0;
            padding:0;
        }
        ul li{
            float: left;
            padding:5px 0;
        }
        ul .odd{
            color:#0026ff;
        }
        ul .even{
            color:#ff0000;
        }
        ul .bold{
            font-weight: bold;
        }
        ul li span{
            width: 52px;
            float:left;
            padding:0 10px;
        }
        ul .focus{
            background-color:#cccccc;
        }
    </style>
</head>
<body ng-app="app" ng-controller="myCtr">

    <div>
        <ul>
            <li ng-class="{{bold}}">
                <span>序号</span>
                <span>姓名</span>
                <span>性别</span>
                <span>年龄</span>
                <span>分数</span>
            </li>
            <li ng-repeat="stu in data | young : 1" ng-class-odd="'odd'" ng-class-even="'even'">
                <span>{{$index + 1}}</span>
                <span>{{stu.name}}</span>
                <span>{{stu.sex}}</span>
                <span>{{stu.age}}</span>
                <span>{{stu.score}}</span>
            </li>
        </ul>
    </div>

</body>
<script>
     var app = angular.module('app',[]);

     app.controller('myCtr',['$scope',function($scope){


         $scope.bold = 'bold';
         $scope.data = [
             {name : "小明",sex : "男",age : 24,score : 88},
             {name : "张东",sex : "男",age : 21,score : 90},
             {name : "小花",sex : "女",age : 25,score : 95},
             {name : "张蕾",sex : "女",age : 19,score : 86}
         ];

     }]);


     app.filter('young',function(){
         return function(e,type){
             var _out = [];
             var _sex = type ? '男' : '女';
             for(var i = 0;i < e.length;i++){
                 if(e[i].age > 22 && e[i].age < 28 && e[i].sex == _sex){
                     _out.push(e[i])
                 }
             }
             return _out;
         }
     })



</script>


</body>
</html>

首先需要通过页面模块app调用”filter”方法，创建一个名未”young”的自定义过滤器。
该过滤器通过return语句返回一个函数。
在函数体内，通过编写代码，实现对应需要的功能开发。
函数中定义了两个参数，”e”和”type”，前者”e”参数在调用过滤器时，将会被需要过滤的数据自动注入，关于自动注入的概念，以后学到了再详细去说。后者”type”参数，将会在调用过滤器时，通过冒号的形式向过滤器传递实参。

自定义函数解析：

在函数体内，由于过滤的是一个数组，所以预先定义了一个数组
通过调用过滤器时传递过来的数据”e”进行遍历
通过遍历”e”中对应的数据，判断”age”是否大于22并且小于28并且与传入的”type”(性别)是否相等，如果相等就push进预定义好的数组当中
最后通过调用return语句，将包含符合过滤条件数据的数组，”_out”返回给自定义过滤器”young”，当在视图模块中调用过滤器”young”时，将执行返回函数体中代码，并返回符合条件的数据，最终实现根据需求过滤数据的功能。

核心代码：

app.filter('young',function(){
         return function(e,type){
             var _out = [];
             var _sex = type ? '男' : '女';
             for(var i = 0;i < e.length;i++){
                 if(e[i].age > 22 && e[i].age < 28 && e[i].sex == _sex){
                     _out.push(e[i])
                 }
             }
             return _out;
         }
     })