Question

有人能给我一个如何使用角度滤波器比较器的例子吗？

来自官方文件：

function（actual，expected）：该函数将被赋予对象值和要比较的谓词值，如果该项应包含在过滤结果中，则应返回true。

有一篇很棒的博客文章谈论角度过滤器： 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>

如果我们输入＆＃39; J＆＃39;进入搜索框，因为所有条目都在某处有一个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>

打字＆＃39; J＆＃39;将没有显示任何结果，因为没有字段恰好是J.如果输入以下任何字符，则只会得到结果（区分大小写）：

John Jones
彼得伯勒
Angela Atkinson
泽西
Peter Peterjon
阿特尔伯勒

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

3） WITH COMPARATOR AS 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） CUSTOM FILTER

我们可以创建一个自定义过滤器并将管道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会迭代对象并尝试将它们整体和递归地进行比较。

＆＃13;

// 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);
  }
}

＆＃13;

<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>

＆＃13;

就我而言，＆＃34; quickSearch＆＃34;很大程度上没有意义，过滤是由不同的逻辑完成的。您最后可以通过添加＆＃34; |来链接另一个过滤器滤波器：快速搜索＆＃34;进入ng-repeat。

角度函数滤波器比较器示例

2 个答案: