角度精确过滤器

本文介绍了角度精确过滤器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在 Angular 中，有没有办法修改过滤器，使其只返回完全匹配的结果?

In Angular, is there a way to modify the filter such that it only returns exact matches?

示例:

var words = [
    {   title: "ball"   },
    {   title: "wall"   },
    {   title: "all"    },
    {   title: "alloy"  }
];

var wordsFiltered = filter('filter')
(
    words,
    {
        'title': 'all'
    }
);

以上将匹配 'ball'、'wall'、'all' 和 'alloy'.但我希望它只匹配全部".有什么办法可以改变吗?

The above will match 'ball', 'wall', 'all' and 'alloy'. But I would like it to only match 'all'. Any way to change it?

UPDATE

从 AngularJS v.1.1.3 开始，精确的过滤是原生提供:

Find words that exactly match title:
<input ng-model="match.title" />
<br>
and exactly match type:
<input ng-model="match.type" />
<hr>
<table>
  <tr ng-repeat="word in words | filter:match:true">
   <td>{{word.title}}</td>
  </tr>
</table>

您的问题暗示您希望匹配多个对象属性，因此这里有一个过滤器:

Your question implies that you would want to match against multiple object properties so here's a filter that does that:

app.controller('AppController',
    [
      '$scope',
      function($scope) {
        $scope.match = {};
        $scope.words = [
          { title: "ball", type: 'object' },
          { title: "wall", type: 'object' },
          { title: "all", type: 'word' },
          { title: "alloy", type: 'material' }
        ];

      }
    ]
  );

app.filter('exact', function(){
  return function(items, match){
    var matching = [], matches, falsely = true;

    // Return the items unchanged if all filtering attributes are falsy
    angular.forEach(match, function(value, key){
      falsely = falsely && !value;
    });
    if(falsely){
      return items;
    }

    angular.forEach(items, function(item){ // e.g. { title: "ball" }
      matches = true;
      angular.forEach(match, function(value, key){ // e.g. 'all', 'title'
        if(!!value){ // do not compare if value is empty
          matches = matches && (item[key] === value);
        }
      });
      if(matches){
        matching.push(item);
      }
    });
    return matching;
  }
});

<body ng-controller="AppController">

  Find words that exactly match title:
  <input ng-model="match.title" />
  <br>
  and exactly match type:
  <input ng-model="match.type" />
  <hr>
  <table>
    <tr ng-repeat="word in words | exact:match">
     <td>{{word.title}}</td>
    </tr>
  </table>
</body>

这篇关于角度精确过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！