javascript - 角度搜索多个输入值

Question

我有一个通过 ng-repeat 填充的结果集。现在我需要进行某种过滤。我尝试使用 ng-filter 过滤掉搜索结果。用例：用户可以输入多个以逗号分隔的商家 ID （或任何其他首选机制）。填充的结果集对应于用户输入的商家 ID。当前工作方式：搜索单个商家 ID 时搜索效果很好。例如，当用户输入 MercerId 时，此列表会列出所有以 MercerId 开头的商家。当输入值为merchantId_1时，结果只与merchantId_1 相关。我需要的是用户应该被赋予输入的能力MercerId_1，MercerId_2（每个逗号分隔）并列出结果对应于两个商家 ID。

使用 Angular 实现这一目标的可行方法是什么。

Answer 1

我做了一个可以实现你目标的plunker。

https://plnkr.co/edit/T9Z6GCFHzwH9xCKxkxJ7?p=preview

HTML：

<input ng-model="searchText" />
<div ng-repeat="merchant in merchants | merchantFilter:searchText">
  {{merchant}}
</div>

JS：

angular.module('app', [])
.controller('testController', function($scope) {
  $scope.merchants = ['merchant_1', 'merchant_2', 'merchant_3']
})
.filter('merchantFilter', function() {
  return function(merchants, searchText) {
    // If there's no input, return full list
    if (!searchText) return merchants;
    // Split and trim the search string
    var searchTerms = searchText.split(',');
    searchTerms = searchTerms.map(function(term) {
      return term.trim();
    })
    // Filter and return merchants matching any search term
    var returnedArray = [];
    _.forEach(merchants, function(merchant) {
      if (_.find(searchTerms, function(term) {
        return merchant.indexOf(term) > -1;
      })) {
        returnedArray.push(merchant)
      }
    })
    return returnedArray;
  }
});