具有多个值的AngularJS过滤器中继器答案

【问题标题】：AngularJS filter repeater with multiple values具有多个值的AngularJS过滤器中继器
【发布时间】：2016-04-30 03:47:18
【问题描述】：

我有一个中继器，我需要通过输入到文本字段中的文本来过滤它，所以我已经这样做了

<tr ng-repeat="i in filteredItems = (iso3166 | filter: {alpha_2: countryQuery})">

数据是一个json对象数组，$scope.iso3166：

  [{
  "name": "Afghanistan",
  "alpha_2": "AF",
  "alpha_3": "AFG",
  "country-code": "004",
  "iso_3166-2": "ISO 3166-2:AF",
  "region": "Asia",
  "sub-region": "Southern Asia",
  "region-code": "142",
  "sub-region-code": "034",
  "license": "unclassified",
  "prohibited": "unclassified",
  "size": "unclassified"
}, ...

因此您可以键入“af”，然后表格过滤器显示阿富汗。

现在我需要让输入到字段返回匹配的内容不仅与alpha_2 键匹配，还与name 匹配。例如，“af”不仅应匹配“阿富汗”，还应匹配“中非共和国”。

我查看了 Angular 1.4.1 文档并看到了逗号方法，但它似乎执行了 AND 比较。如

<tr ng-repeat="i in filteredItems = (iso3166 | filter: {alpha_2: countryQuery, name: countryQuery })">

在这种情况下，有没有办法做一个“或”，以便输入的任何内容过滤到查询在“alpha_2”或“名称”中的任何项目？

更新：如果有人好奇，我会按照以下答案中的建议使用过滤器：

  $scope.countryFilter = function (value) {
    if (angular.isUndefined($scope.countryQuery) || $scope.countryQuery === '') {
      return true;
    }
    return value.name.indexOf($scope.countryQuery) >= 0 || value.alpha_2.indexOf($scope.countryQuery) >= 0;
  };

【问题讨论】：

你试过了吗：i in filteredItems | filter:countryQuery？
是的，但这将匹配任何字段。例如，我不想将“region:Africa”与“af”匹配。只是“alpha_2”或“name”字段。

标签： javascript angularjs angularjs-ng-repeat angular-filters

【解决方案1】：

您可以指定一个函数的名称来过滤结果，然后在控制器中实现过滤逻辑，而不是这样做。

<tr ng-repeat="i in filteredItems = (iso3166 | filter: filterFn)">

在控制器中：

scope.filterFn = function(item) {
    if(//item meets criteria) {
        //returning true will put the item into the ng-repeat data
        return true;
    }
    return false;
}

【讨论】：

我写了一个过滤器。我还是更喜欢在 html 中做，但它更快。

【解决方案2】：

您可以像这样将属性应用到 ng-repeat 过滤器：

https://jsfiddle.net/pzek3tmy/

控制器

function Controller($scope) {
      var vm = this;

      vm.regions = [{
        "name": "Afghanistan",
        "alpha_2": "AF",
        "alpha_3": "AFG",
        "country-code": "004",
        "iso_3166-2": "ISO 3166-2:AF",
        "region": "Asia",
        "sub-region": "Southern Asia",
        "region-code": "142",
        "sub-region-code": "034",
        "license": "unclassified",
        "prohibited": "unclassified",
        "size": "unclassified"
      }, {
        "name": "Germany",
        "alpha_2": "GN",
        "alpha_3": "AFG",
        "country-code": "004",
        "iso_3166-2": "ISO 3166-2:AF",
        "region": "Asia",
        "sub-region": "Europe",
        "region-code": "143",
        "sub-region-code": "034",
        "license": "unclassified",
        "prohibited": "unclassified",
        "size": "unclassified"
      }];
    }

HTML

<div ng-controller="Controller as ctrl">
  <input type="text" ng-model="region_filter">
  <ul>
    <li ng-repeat="region in ctrl.regions | filter:{'alpha_2':region_filter} | filter:{'name':region_filter}">{{region.name}}       </li>
  </ul>
</div>

【讨论】：

这只会返回同时匹配（AND）的匹配，问题是如何匹配（OR）。在您的示例中，“德国”不会返回德国结果。