Question

我在网上看到了很多有关此问题的相互矛盾的答案，但我正在寻找最简洁的方法来实现这一目标。

我的数据是世界各国的列表，包括名称，ISO alpha代码，世界各地等。

我在表格中有一个ng-repeat来显示：

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

我有一个文本字段和一个需要过滤列表的下拉列表。

文本字段应按国家/地区名称进行过滤：通过匹配ISO alpha代码或国家/地区名称。

<input type="text" id="countrySearch" placeholder="Country" ng-model="countryQuery">

这适用于Controller：

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

我存在的祸根是如何将下拉列入混音。下拉列表使用一组具有世界各地区值的对象，如

$scope.regionMenu = [
    {
      label: 'Show All',
      value: ''
    },
    {
      label: 'EU',
      value: 'Europe'
    },...

和

<select ng-model="region" ng-options="s.value as s.label for s in regionMenu"></select>

目标是让输入字段一起工作，因此如果输入的值匹配，则filteredItems将显示一行：

（ISO alpha-2 OR Name）AND（菜单中选择的区域）

有关如何编辑countryFilter功能或完全重写以完成此功能的任何帮助。

Answer 1

我可以想到两个选择：

解决方案1：链接另一个过滤器

此解决方案更容易，但效率较低，因为您最终可以扫描阵列中的所有元素两次（而不是解决方案2中的一次）。

控制器：

$scope.regionFilter = function (value) {
  if (angular.isUndefined($scope.region) || $scope.region === '') {
    return true;
  }
  return value.region === $scope.region;
};

模板：

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

解决方案2：加入过滤器

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

  var passRegion;
  if (angular.isUndefined($scope.region) || $scope.region === '') {
    passRegion = true;
  }
  else {
    passRegion = value.region === $scope.region;
  }

  return passCountry && passRegion;
};

Angular JS过滤ng-repeat与字段AND下拉列表

1 个答案:

解决方案1：链接另一个过滤器

解决方案2：加入过滤器