zoukankan      html  css  js  c++  java
  • angular: filter过滤器

    HTML模板绑定符号{{}}内,通过 | 符号来调用过滤器。如:

    {{name | filter }}

    在JavaScript中通过$filter来调用过滤器。

    也可以多个filter连用,上一个filter的输出将作为下一个filter的输入。

    {{ expression | filter1 | filter2 | ... }}
     
    filter还可以接收参数。

    以html形式使用过滤器时,如需传递参数给过滤器,只要在过滤器名字后面加冒号即可。多个参数,可以在每个参数后面加入冒号。

    filter过滤器可以从给定数组中选择一个子集,并且将其生成一个新数组返回。filter过滤器只能用于数组。

    这个过滤器,它的第一个参数可以是字符串、对象、(用来从数组中选择元素的)函数。第二个参数可以是true、false、函数。

    The filter filter can only be used on arrays, and it returns an array containing only the matching items.

    第一个参数是expression,它可以是:

    1. 字符串 、或者 !字符串 - 分别表示包含或者不包含这个字符串的元素。

    {{['Ari', 'likes', 'to', 'travel']| filter:'i'}}

    输出:["Ari","likes"]

    2. 对象:将待过滤对象(| 符号前面的数组)的属性和这个对象中的同名属性进行比较,如果属性值是字符串就会判断是否包含该字符串。如果希望全部属性进行对比,可以将$作为键名。

    {{[{
        'name':'Ari',
        'city':'Beijing'
    },{
        'name':'Nate',
        'city':'Xiamen'
    }] | filter:{'city':'Beijing'} }} 

    输出:[{"name":"Ari","city":"Beijing"}] 

    3. 函数 function(value, index, array):布尔值函数会对(给定数组的)每个元素执行这个函数,返回非假值的元素会出现在新的数组并返回。

    第二个参数是比较器,它可以是:(默认值为false)

    1. true

    2. false

    3. 函数(布尔函数)

    先来看一个例子

    比如以下这段代码,这里的true产生了什么样的作用?

    <body ng-app="myFilterApp">
    
    <div ng-controller="myFilterController">
        <table id="searchTextResults">
            <tr><th>Name</th><th>Phone</th></tr>
            <tr ng-repeat="friend in friends |myFilter:'param1':'param2':true:'windowScopedFilter'">
                <td>{{friend.name}}</td>
                <td>{{friend.phone}}</td>
            </tr>
        </table>
    </div>
    
    <script>
        function windowScopedFilter(input) {
            var output = [];
          
    //[].forEach方法中的function回调有三个参数:第一个参数是遍历的数组内容,第二个参数是对应的数组索引,第三个参数是数组本身

      //angular.forEach(objs, function(data,index,array){} objs - 需要遍历的集合

            angular.forEach(input, function (v,k) {
                if(v.phone.indexOf('555')>= 0){
                    output.push(v);
                }
            });
            return output;
        }
        var myapp = angular.module('myFilterApp', []);
        myapp.filter('myFilter', function () {
            return function (input, param1) {
                var args = Array.prototype.slice.call(arguments);//将具有length属性的对象转成数组
                if (5<=args.length) {
                    return window[args[4]](input);
                }
                return input;
            }
        });
        myapp.controller('myFilterController', ['$scope', function ($scope) {
            $scope.friends = [
                {name:'John', phone:'555-1276'},
                {name:'Annie', phone:'800-BIG-MARY'},
                {name:'Mike', phone:'555-4321'},
                {name:'Adam', phone:'555-5678'},
                {name:'David', phone:'555-8765'},
                {name:'Mikay', phone:'555-5678'}
            ];
        }]);
    
    </script>

    让我们来翻一翻官方文档吧。filter 

    在html模板绑定:

    {{ filter_expression | filter : expression : comparator : anyPropertyKey}}

    可以看出,第二个参数是一个比较器。比较器比较什么?让我们继续看原文:

    Comparator which is used in determining if values retrieved using expression (when it is not a function) should be considered a match based on the the expected value (from the filter expression) and actual value (from the object in the array).

    Can be one of:

    • function(actual, expected): The function will be given the object value and the predicate value to compare and should return true if both values should be considered equal.

    • true: A shorthand for function(actual, expected) { return angular.equals(actual, expected)}. This is essentially strict comparison of expected and actual.

    • false: A short hand for a function which will look for a substring match in a case insensitive way. Primitive values are converted to strings. Objects are not compared against primitives, unless they have a custom toString method (e.g. Date objects).

    Defaults to false.

    先试着翻译下这段。

    比较器,用于确定是否使用表达式检索值(当比较器不是函数时),对预期值(过滤器表达式)和给定的实际值(数组中的对象)进行比较。

    它可以是:

    1. 函数 function(actual, expected): 该函数接受两个参数对象值和预期值进行比较,如果这两个值应被视为相等,应返回TRUE。(不敢怀疑英文原文文档英文拼写错误,但是怎么看都应该是predicted value 预期值吧~)

    2. true: function(actual, expected) { return angular.equals(actual, expected)}的缩写形式。对预期值和实际值进行严格比较。

    3. false:对子字符串不分大小写的匹配。原始值被转换为字符串。对象如果没有自定义的toString方法,则不和原始值进行比较。

    默认值为false。

    实际上,看完官方文档,对于这个比较器的理解和应用,感觉不是那么明朗。这就需要靠多看一些例子来理解。

     

    结合ng-model, filter过滤器还有一个超赞的功能:

    <div ng-app="myApp" ng-controller="namesCtrl">
    
    <p>输入字母:</p>
    
    <p><input type="text" ng-model="test"></p>
    
    <ul>
      <li ng-repeat="x in names | filter:test">
        {{ x }}
      </li>
    </ul>
    
    </div>
    
    <script>
    angular.module('myApp', []).controller('namesCtrl', function($scope) {
        $scope.names = [
            'Jani',
            'Carl',
            'Margareth',
            'Hege',
            'Joe',
            'Gustav',
            'Birgit',
            'Mary',
            'Kai'
        ];
    });
    </script>
    
    <p>列表只包含匹配过滤器的名称。</p>

    效果如下:

    输入字母,就可以过滤出只包含输入字母的项。

  • 相关阅读:
    搞懂树状数组
    C#接口(Interface)
    C#接口(Interface)
    C#运算符的重载
    C#和C++的区别(一)
    hdu1874 畅通工程续
    hdu1874 畅通工程续
    C#多态性
    C#多态性
    C#继承
  • 原文地址:https://www.cnblogs.com/dodocie/p/6836572.html
Copyright © 2011-2022 走看看