Angular JS 过滤器 ng-repeat with field AND dropdown

Question

我在网上看到了很多关于这个问题的相互矛盾的答案，但我正在寻找最简洁的方法来完成这个。

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

我在 table 中有一个 ng-repeat 来显示这个：

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

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

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

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

这在控制器中适用于此：

    $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 或名称）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 with field AND dropdown

Angular JS filter ng-repeat with field AND dropdown

javascript

angularjs

angularjs-ng-repeat

angularjs-filter

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

解决方案 2：加入过滤器