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

Answer 2

我创建了一个示例here。

Zahori建议使用ngList，并为各国定义自定义过滤器。

myApp.filter('MyFilter', function() {
    return function(items, countries) {
        if (!angular.isUndefined(items) && !angular.isUndefined(countries) && countries.length > 0) {
            var filtered = [];

            angular.forEach(items, function(item) {
                angular.forEach(countries, function(currentCountry) {
                     if(item.countries.indexOf(currentCountry) >= 0 ) filtered.push(item);
                });

            });

            return filtered;
        } else {
            return items;
        }
    };
});

Answer 3

您的输入只是一个字符串而不是数组。您可以使用ngList来实现此目的。

以下是如何使用它的一个很好的例子： https://docs.angularjs.org/api/ng/directive/ngList

Answer 4

searchFilter应该是$ scope的方法。否则，默认情况下，它仅搜索字符串。

$scope.searchFilter = function (dataItem) {
    //your search logic here and return true/false.
};