角函数滤波器比较器示例

Question

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

来自官方文档：

function(actual, expected): 函数将被赋予对象值和谓词值进行比较，如果该项目应包含在过滤结果中，则应返回 true。

有一篇很棒的博客文章谈到了 Angular 过滤器： Fun with AngularJS filters - Part 1: the filter filter

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

对于更特殊的匹配需求，您可以传递一个函数而不是布尔值作为比较器参数。

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

Answer 1

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

这是过滤器语法：

data | filter: expression : comparator

AngularJS 内置的filter 函数在其传递的数据上提供不区分大小写的子字符串搜索，当表达式是字符串或受过滤器约束的对象的属性时，与expression 进行比较。 comparator 使您能够进一步细化过滤器。如果您只是将comparator 指定为true，它将确保只返回与expression 完全匹配的项目。更灵活的方法是将comparator 指定为返回predicate function 的函数。

示例

以下数据在视图的$scope 中作为人员公开：

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

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

<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) 比较器为true

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

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

• 约翰·琼斯
• 彼得伯勒
• 安吉拉·阿特金森
• 球衣
• 彼得·彼得乔恩
• 阿特尔伯勒

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

3) 比较器为function

我们会将一个名为customComparator 的自定义比较器predicate function 附加到控制器的$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

Answer 2

我做了这样的事情，因为 Angular 迭代对象并尝试将它们整体以及递归地比较它们的各个属性。

// in your controller
$scope.filterMyData = function (input, search_param) {
  if (input && input.propertyWeCareAbout) {
    // it's ugly, but to quickly get something done you can ignore search_param 
    return input.propertyWeCareAbout === $scope.SomeOtherData;
  }
  else {
    return angular.equals(input, search_param);
  }
}

<span>Quick search: </span><input type="search" ng-model='quickSearch'/><br/>


<table>
  <tr ng-repeat="obj in someHttpService.dataAsArray | filter:quickSearch:filterMyData">
    <td>{{ obj.key }} </td>
    <td>{{ obj.propertyWeCareAbout }}</td>
  </tr>
</table>

在我的例子中，“quickSearch”在很大程度上是没有意义的，过滤是由不同的逻辑完成的。您总是可以通过在 ng-repeat 中添加“| filter:quickSearch”，在最后链接另一个过滤器。