Question

我有一个转发器，我需要通过输入文本字段的文本进行过滤，所以我已经完成了这个

<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"
}, ...

所以你可以输入＆＃34; af＆＃34;并且表格过滤显示阿富汗。

现在我需要在字段中输入的内容不仅仅针对alpha_2密钥而且还针对name密钥进行匹配。例如，＆＃34; af＆＃34;应该与＃34;阿富汗＆＃34;还有＃34;中非共和国＆＃34;。

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

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

有没有办法做＆＃34;或＆＃34;在这种情况下，无论是什么类型的过滤器，查询所在的任何项目＆＃34; alpha_2＆＃34; 或＆＃34;名称＆＃34;？

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

  $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;
  };

Answer 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;
}

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

AngularJS滤波器中继器具有多个值

2 个答案: