AngularJS过滤器

最新推荐文章于 2021-03-25 09:35:17 发布

Z_BuzzLightyear

最新推荐文章于 2021-03-25 09:35:17 发布

阅读量539

点赞数 1

分类专栏： AngularJS 1.x版本学习文章标签： AngularJs 过滤器

本文链接：https://blog.csdn.net/BuzzEQ/article/details/80895004

版权

AngularJS 1.x版本学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

过滤器

匹配方式过滤

通过filter过滤器直接匹配包含字符参数的数据
- 在调用filter过滤器时，添加一个需要匹配的字符参数：
{{data | filter:'匹配字符'}}

{{data | filter:80}}
在字符参数重使用对象形式匹配指定属性数据
- 过滤器参数是一个对象，通过key/value的方式声明属性名称和匹配的字符内容，如果属性名是$的时候，则表示在全部属性中查找：
{{data | filter:{score:80}}}

{{data | filter:{$:80}}} = {{data | filter:80}}
在字符参数中使用自定义函数匹配相应数据
- 直接调用自定义函数名，处理相对复杂的数据匹配情况
{{data | filter:函数名称}}

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>匹配方式过滤</title>
  <script src="components/angular/angular.min.js"></script>
  <style>
      ul{
          list-style-type: none;
          width: 408px;
          margin: 0px;
          padding: 0px;
      }
      ul li{
          float: left;
          padding: 5px 0px;
      }
      ul li span{
          width: 52px;
          float: left;
          padding: 0px 10px;
      }
  </style>
</head>

<body ng-app="a3_2">
  <div ng-controller="c3_2">
      <ul>
          <li>
              <span>index</span>
              <span>name</span>
              <span>sex</span>
              <span>age</span>
              <span>score</span>
          </li>
          <li ng-repeat="stu in data | filter:findscore">
              <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 a3_2 = angular.module('a3_2', []);
      a3_2.controller('c3_2', ['$scope', function ($scope) {
          $scope.data = [{
                  name: 'WJ',
                  sex: 'woman',
                  age: 24,
                  score: 70
              },
              {
                  name: 'GYT',
                  sex: 'woman',
                  age: 24,
                  score: 80
              },
              {
                  name: 'XP',
                  sex: 'man',
                  age: '24',
                  score: 90
              },
              {
                  name: 'ZYT',
                  sex: 'man',
                  age: '24',
                  score: 100
              }
          ];
          $scope.findscore = function(e){
              return e.score > 80;
          }
      }])
  </script>
</body>

</html>

解析

当通过filter过滤器匹配数据时，直接将函数名作为过滤器参数，此时，“data”数据对象已作为实參自动传递给函数的形參“e”中，函数接收后，根据“data”对象中的“score“属性值，将分数在限制范围之内。

自定义过滤器

介绍

需要在页面模块中注册一个过滤器的构造方法，该方法将返回一个以输入值为首个参数的函数没在函数体中。

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>匹配方式过滤</title>
    <script src="components/angular/angular.min.js"></script>
    <style>
        ul{
            list-style-type: none;
            width: 408px;
            margin: 0px;
            padding: 0px;
        }
        ul li{
            float: left;
            padding: 5px 0px;
        }
        ul li span{
            width: 52px;
            float: left;
            padding: 0px 10px;
        }
    </style>
</head>

<body ng-app="a3_2">
    <div ng-controller="c3_2">
        <ul>
            <li>
                <span>index</span>
                <span>name</span>
                <span>sex</span>
                <span>age</span>
                <span>score</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 a3_2 = angular.module('a3_2', []);
        a3_2.controller('c3_2', ['$scope', function ($scope) {
            $scope.data = [{
                    name: 'WJ',
                    sex: 'woman',
                    age: 24,
                    score: 70
                },
                {
                    name: 'GYT',
                    sex: 'woman',
                    age: 24,
                    score: 80
                },
                {
                    name: 'XP',
                    sex: 'man',
                    age: '24',
                    score: 90
                },
                {
                    name: 'ZYT',
                    sex: 'man',
                    age: '24',
                    score: 100
                }
            ];
        }])
        .filter('young',function(){
            return function(e,type){
                var _out = [];
                console.log(type);
                var _sex = type ? 'man':'woman';
                console.log(e);
                for(var i = 0;i<e.length;i++){
                    if(e[i].score> 80){
                        console.log(e[i]);
                        _out.push(e[i]);
                    }
                }
                return _out;
            }
        })
    </script>
</body>

</html>

代码解析

自定义的形參 e 是整个数组，而不是循环的单个对象，而匹配方式过滤是将循环出来的对象传给自定义函数。先这个数组循环。找到符合要求的数据，push到新的数组。返回到页面中，展示。

<li ng-repeat="stu in data | young:0">

“:”后面 0 就是参数传到自定义过滤器中。

过滤器的应用
- 表头排序
x in list | orderBy : title : desc
- 字符查找
x in list | filter : {name:key}

Z_BuzzLightyear

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS过滤器

过滤器匹配方式过滤通过filter过滤器直接匹配包含字符参数的数据在调用filter过滤器时，添加一个需要匹配的字符参数：{{data | filter:'匹配字符'}}{{data | filter:80}}在字符参数重使用对象形式匹配指定属性数据过滤器参数是一个对象，通过key/value的方式声明属性名称和匹配的字符内容，如果属性名是$的时候，则表示在全部属性...
复制链接

扫一扫