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

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过滤器

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ng-repeattitle>
    <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”中。

你可能感兴趣的:(Angular学习)