javascript - Angular 函数过滤器比较器示例

Question

谁能给我一个如何使用 Angular 过滤器比较器的例子？

来自官方文档:

function(actual, expected): The function will be given the object value and the predicate value to compare and should return true if the item should be included in filtered result.

有一篇很棒的博文讨论 Angular 过滤器: Fun with AngularJS filters - Part 1: the filter filter

然而，在它的最后，我正在寻找函数比较器的一些有用示例，但我仍然一无所获。

For more particular matching needs, you can pass a function instead of a boolean as the comparator argument.

我自己尝试了几种组合。在表达式末尾添加函数或指向范围内的函数都不会起作用。

Answer 1

详细说明 filter : expression : comparator 的工作原理。

这是过滤器语法:

data | filter: expression : comparator

AngularJS 内置的 filter 函数提供了一个不区分大小写的子串搜索，当表达式是一个字符串或者受过滤条件影响的对象的属性。 比较器 使您能够进一步细化过滤器。如果您只是将 comparator 指定为 true，它将确保仅返回与 expression 完全匹配的项。一种更灵活的方法是将 comparator 指定为返回 predicate function 的函数。 .

示例

在 View 的 $scope 中将以下数据作为人员公开:

var people = [
    {name:'John Jones',location:'Peterborough'},
    {name:'Angela Atkinson',location:'Jersey'},
    {name:'Peter Peterjon',location:'Attleborough'}
];

我们将在 View 上设置一个简单的输入搜索框，我们将其作为过滤器表达式参数:

<input type="text" ng-model="searchText" placeholder="Search People">

1) 没有比较器

搜索结果将在我们调用过滤器的地方输出:

<p ng-repeat="person in people | filter : searchText">{{person.name}} {{person.location}}</p>

如果我们在搜索框中键入“J”，因为所有条目的某处都有一个 j，结果仍将显示所有 3 个条目。

演示:https://plnkr.co/edit/VID2CAKvUI5mjgKLImaI?p=preview

2) WITH COMPARATOR AS true

<p ng-repeat="person in people | filter : searchText : true">{{person.name}} {{person.location}}</p>

输入“J”将不会显示任何结果，因为没有字段完全是 J。只有输入以下任何内容(区分大小写)，我们才会得到结果:

• 约翰·琼斯
• 彼得伯勒
• 安吉拉·阿特金森
• Jersey
• 彼得·彼得琼
• 阿特伯勒

演示:https://plnkr.co/edit/hhw2u03egXsUo7IyGc1w?p=preview

3) WITH COMPARATOR AS function

我们将附加一个自定义比较器 predicate function将 customComparator 调用到 Controller 的 $scope。我将其设置为需要完全匹配，但它不再区分大小写。我们按如下方式使用它:

<p ng-repeat="person in people | filter : searchText : customComparator">{{person.name}} {{person.location}}</p>

演示:https://plnkr.co/edit/Iy9r9bLQQdzefuzUv0TD?p=preview

4) 自定义过滤器

我们可以创建一个自定义过滤器并将 | 管道连接到其中，而不是使用带有表达式和比较器的内置 filter。这样一个与上面的 WITH COMPARATOR AS function 完全相同的自定义过滤器可能如下所示:

.filter('customFilter',[function() {

    var customFilter = function(arr,searchText){

      if(! searchText)
        return arr;

      return arr.filter(function(arrayItem){

          var match = false;

          for(var key in arrayItem) {
              if(! arrayItem.hasOwnProperty(key) || key === '$$hashKey')
                 continue;

              if(arrayItem[key].toLowerCase() === searchText.toLowerCase()) {
                match = true;
                break;
              }
           }

           return match;

       });
    };

    return customFilter;

}])

它将按如下方式使用:

<p ng-repeat="person in people | customFilter : searchText">{{person.name}} from {{person.location}}</p>

请注意，此语法不是expression : comparator。相反，它是 customFilter : filterArgument。

演示:https://plnkr.co/edit/wWT3cjfy7867WUSqqSKj?p=preview