【AngularJS】自定义过滤器

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

abloume

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

阅读量345

点赞数

分类专栏： AngularJS

本文链接：https://blog.csdn.net/u013451157/article/details/60323099

版权

AngularJS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

先通过页面模块调用“filter”方法，创建了一个名为“young”的自定义过滤器，该过滤器将通过return语句返回一个函数。

在函数体中，通过代码编写，实现对应需求的功能开发。

首先，在这个函数中，定义了两个形参“e”和“type”，两者“e”参数在调用过滤器时，将会被需要过滤的数据自动注入，后者“type”参数，将会在调用过滤器时，通过冒号形式向过滤器传递实参。

其次，在函数体中，由于本示例过滤的数据是一个数组，因此，先定义一个名为“_out”的空数组，并将传来的“type”性别类型参数进行字符转化，保存在变量“_sex”中；然后，对自动注入的“e”数组中的数据进行遍历，在遍历过程中，检测各项元素的“年龄”属性是否在“22~28”范围之间，并且“性别”属性值是否与变量“_sex”相符。如果这两项条件都满足，则将该项数组元素添加至空数组“_out”中。

最后，在函数体结束时，通过调用return语句，将包含符合过滤条件数据的数组“_out”返回给自定义过滤器“young”。

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<style>
  body{font-size: 12px;}
  ul{
    list-style-type: none;
    width: 408px;
    margin: 0px; padding: 0px;
  }
  ul li{
    float: left;
    padding: 5px 0px;
  }
  ul .bold{font-weight: bold;}
  ul li span{
    width: 52px;
    float: left;
    padding: 0px 10px;
  }
</style>
</head>
<body>
  <div ng-controller="myCtrl">
    <ul>
      <li ng-class="{{bold}}">
        <span>序号</span>
        <span ng-click="title='name'; desc=!desc">姓名</span>
        <span ng-click="title='sex'; desc=!desc">性别</span>
        <span ng-click="title='age'; desc=!desc">年龄</span>
        <span ng-click="title='score'; desc=!desc">分数</span>
      </li>
      <li ng-repeat=" stu in data | young:0">
        <span>{{$index+1}}</span>
        <span>{{stu.name}}</span>
        <span>{{stu.sex}}</span>
        <span>{{stu.age}}</span>
        <span>{{stu.score}}</span>
      </li>
    </ul>
  </div>

  <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope){
      $scope.bold = "bold";
      $scope.data = [
      { name: "张明明", sex: "女", age: 24, score: 95},
      { name: "沥青四", sex: "女", age: 27, score: 87},
      { name: "刘晓华", sex: "男", age: 28, score: 86},
      { name: "陈仲忠", sex: "男", age: 23, score: 99}
      ];
    })
    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>

abloume

关注

0
点赞
踩
1

收藏

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

先通过页面模块调用“filter”方法，创建了一个名为“young”的自定义过滤器，该过滤器将通过return语句返回一个函数。在函数体中，通过代码编写，实现对应需求的功能开发。首先，在这个函数中，定义了两个形参“e”和“type”，两者“e”参数在调用过滤器时，将会被需要过滤的数据自动注入，后者“type”参数，将会在调用过滤器时，通过冒号形式向过滤器传递实参。其次，在函数体中，由于
复制链接

扫一扫

专栏目录