在 ng-repeat 表中搜索（过滤）多个项目的简单方法？ AngularJS答案

【问题标题】：Simple way to search (filter) multiple items within ng-repeat table? AngularJS在 ng-repeat 表中搜索（过滤）多个项目的简单方法？ AngularJS
【发布时间】：2014-08-27 18:35:10
【问题描述】：

我试图找到一种简单的方法，通过允许搜索多个事物来使搜索更深入。即，如果我在搜索汽车，而不仅仅是输入“Honda”，我可以输入“Honda, black, 2001”。

这是我当前布局的骨架。

<input type="text" ng-model="search.$" placeholder="Search by: Name, Summoner, Elo, Role, Champion, ect..">

<table>
   <tbody ng-repeat="actors in Users | orderBy:orderByField:reverseSort | filter:search">
   <tr class="col-xs-12" ng-click="showDetails = ! showDetails">
          <td class="col-xs-2">{{actors.name}}</td>
          <td class="col-xs-2">{{actors.summoner}}</td>
          <td class="col-xs-2">{{actors.school}}</td>
          <td class="col-xs-2">{{actors.rank}}</td>
    </tr>
    <tr ng-show="showDetails">
          {{actors.other_stuff}}
    </tr>            
   </tbody>
</table>

所以现在，当我在搜索框中输入内容时，它会为我提供在表格中任何地方出现的信息，这很好。但是，这通常会返回非常广泛的结果。我试图找到一种方法，允许用户通过多个单词过滤来搜索更具体的项目。

回到汽车示例，如果我搜索“Honda black 2001”，这不会给我任何信息，因为它会查找整个字符串“Honda black 2001”，而不是“Honda” AND “black” AND “2001”，我我试图找到一种简单的方法来使用 Angular 搜索多个单词，比如使用逗号进行分隔。在 Angular 中这很简单吗？

【问题讨论】：

标签： angularjs search angularjs-ng-repeat

【解决方案1】：

我不确定它有多简单，但您可以使用实现此类过滤的过滤器和控制器函数。

以您的汽车为例，标记可能类似于：

  <input class="form-control" type="text" ng-model="q" placeholder="Search by year, make, model" />
  <br/>
  <ul>
    <li ng-repeat="car in cars | filter:filterCars">{{car.year}} {{car.make}} {{car.model}}</li>
  </ul>

控制器的东西

  $scope.cars = [
  {
    year: 2006,
    make: 'BMW',
    model: 'M3'
  },
  {
    year: 2006, 
    make: 'BMW',
    model: 'Z4'
  },
  {
    year: 1992, 
    make: 'Mazda',
    model: 'Miata'
  },
  {
    year: 2008, 
    make: 'BMW',
    model: '750'
  }
  ];

  var match = function (item, val) {
    var regex = new RegExp(val, 'i');
    return item.year.toString().search(regex) == 0 ||
           item.make.search(regex) == 0 ||
           item.model.search(regex) == 0;
  };

 $scope.filterCars = function(car) {
    // No filter, so return everything
    if (!$scope.q) return true;
    var matched = true;

    // Otherwise apply your matching logic
    $scope.q.split(' ').forEach(function(token) {
        matched = matched && match(car, token); 
    });

    return matched;
  };

这里可能没有涵盖一些边缘情况，但你明白了。

工作example

【讨论】：