AngularJS学习记录-过滤器(匹配方式过滤)

最新推荐文章于 2022-03-22 10:50:22 发布

web_LamHo

最新推荐文章于 2022-03-22 10:50:22 发布

阅读量751

点赞数

分类专栏： Angular学习文章标签： AngularJS

本文链接：https://blog.csdn.net/web_LamHo/article/details/51326487

版权

Angular学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

AngularJS学习记录-过滤器(匹配方式过滤)

与排序方式不同，匹配方式是将字符参数与列表中的各个成员属性值相匹配，如果包含该字符参数值，组显示该条列表记录。
*匹配时不区分字符的大小写。

常见的匹配方式有几种：

通过filter过滤器直接匹配包含字符参数的数据
{{数据 | filter : ‘匹配字符’}}
调用格式代码中，匹配字符是过滤器filter的参数，一旦添加该参数之后，将在整个数据的属性中查找匹配项，找到后，则显示，否则则不显示。
*字符必须用引号括起来

 {{data | filter : 80}}

上述代码中，在data数据的各个属性中，查找包含80的内容记录。
- 在字符参数中使用对象形式匹配指定属性的数据
如果在过滤数据时已经有明确的过滤范围，则可以在字符参数中通过对象的形式指定匹配的属性名称，调用格式如下：
{{数据 | filter : 对象}}
在上述代码中，过滤参数是一个对象，通过key/value的方式声明属性名称和匹配的内容，如果属性名为$，则表示在全部属性中查找。

 {{data | filter : { score : 80}}}和 {{data | filter : { $: 80}}}

前者仅在属性名为score列中匹配值未80的数据记录
后者则在全部属性中匹配数值为80的数据记录，后者相当于{{data | filter : 80}}

在字符参数中使用自定义函数匹配相应数据
在filter过滤器的字符参数中，除了可以使用对象外，还可以直接调用自定义函数名，处理相对复杂的数据匹配情况，格式如下：
{{数据 | filter : 函数名}}
在上述调用格式中，过滤器的参数为函数名，即使自定义的匹配数据的函数名，通过一个示例来学习filter过滤器

<!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 | filter : findScore" 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}
     ];

     $scope.findScore = function(e){
         return e.score > 85 && e.score < 95;
     }

 }])

</script>


</body>
</html>

在代码中，查找分数在85~95之间的数据，在定义函数时，定义了一个名为”e”的形参，该形参的值为数据源对象，然后，根据这个数据源对象中的”score”属性值，通过逻辑运算符返回分数在85到95之间的记录数据。
*当通过filter过滤器匹配数据时，直接将findScore函数名作为过滤器的参数，此时’data’对象已经作为实参自动传递给findScore函数的形参”e”中。