javascript - AngularJS。按数组过滤数组

Question

我有这样的数据结构:

$scope.data = [
  {
    title: "Title1",
    countries: ['USA', 'Canada', 'Russia']
  },
  {
    title: "Title2",
    countries: ['France', 'Germany']
  }
];

即每个项目都有国家/地区名称数组。

我这样显示这些数据:

<tr ng-repeat="dataItem in data">

我希望允许用户通过在输入中提供国家/地区列表来过滤此列表:

如何实现这一目标？

目前我做了这样的事情:

  <input ng-model="searchFilter.countries">
   ...
  <tr ng-repeat="dataItem in data | filter: searchFilter: true">

但显然它仅适用于 1 个国家/地区，不适用于使用逗号在输入中列出的国家/地区数组。

Answer 1

一个简单的解决方案，没有自定义过滤器:

HTML:

<input ng-model="countries" ng-list>

<tr ng-repeat="dataItem in data | filter:countryFilter">

JS:

$scope.countryFilter = function(dataItem) {
    if (!$scope.countries || $scope.countries.length < 1)
        return true;
    var matched = false;
    $scope.countries.filter(function(n) {
        matched = matched || dataItem.countries.indexOf(n) != -1
    });
    return matched;
};

<强> DEMO PLUNKR