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

Question

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

来自官方文件:

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

有一篇很棒的博客文章谈论角度过滤器: 使用AngularJS过滤器的乐趣 - 第1部分:filter过滤器

然而,在它的最后,我正在寻找函数比较器的一些有用的例子,我仍然没有发现任何东西.

对于更具体的匹配需求,您可以传递函数而不是布尔值作为比较器参数.

我自己尝试过几种组合.既不在表达式的末尾添加函数,也不指向范围内的函数来完成工作.

Answer 1

详细解释如何filter : expression : comparator工作.

这是过滤器语法:

data | filter: expression : comparator

AngularJS内置filter函数对传递的数据提供非区分大小写的子字符串搜索,与expression表达式是字符串或受过滤器影响的对象的属性进行比较.这comparator使您能够进一步细化过滤器.如果您只是指定comparatoras true,则将确保仅expression返回与其完全匹配的项目.更灵活的方法是将comparatoras 指定为返回谓词函数的函数.

例子

以下数据在视图中$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',因为所有条目都在某个地方有aj,结果仍会显示所有3个条目.

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

2)与比较器AStrue

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

键入'J'将不会显示任何结果,因为没有字段恰好是J.如果输入以下任何字符,则只会得到结果(区分大小写):

• 约翰琼斯
• 彼得伯勒
• 安吉拉阿特金森
• 新泽西
• 彼得彼得容
• 阿特尔伯勒

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

3)与比较器ASfunction

我们将附上一个自定义的比较谓词函数叫customComparator给$scope控制器.我将其设置为需要完全匹配,但它不再区分大小写.我们用它如下:

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

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

4)自定义过滤器

filter我们可以只创建一个自定义过滤器和管道|,而不是使用内置的表达式和比较器.这样的自定义过滤器与function上面的WITH COMPARATOR AS完全相同可能如下所示:

.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"来链接另一个过滤器.