Question

我试图找到一种简单的方法，通过允许搜索多个内容来进行更深入的搜索。即如果我正在寻找汽车，而不仅仅是键入＆＃34; Honda＆＃34;，我可以输入＆＃34;本田，黑色，2001＆＃34;。

这是我当前布局的骨架。

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

所以现在，当我输入我的搜索框时，它会给我一些字面上出现在我桌子内的信息，这很好。但是，这通常会产生非常广泛的结果。我试图找到一种方法，允许用户通过多个单词过滤来搜索更具体的项目。

如果我搜索＆＃34; Honda black 2001＆＃34;回到汽车示例这不会给我什么，因为它寻找整个字符串＆＃34;本田黑色2001＆＃34;而不是＆＃34;本田＆＃34; AND＆＃34;黑＆＃34; AND＆＃34; 2001＆＃34;，我试图找到一种通过Angular搜索多个单词的简单方法，比如使用逗号分隔。在Angular中这样做很简单吗？

Answer 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

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

1 个答案: