Question

我有一套简单的ng-options。每个子ng-options应该根据被填充的父数据缩小其数据范围。

然而，为了重复主要的父母 - “国家”，我引入了独特的过滤器，因为它重复项目，例如没有过滤器英国在下拉列表中出现两次。

然而，在选择英国之后，我希望看到伦敦和利兹在城市下降，但只有伦敦存在。

HTML：

<label>Country</label>
  <select ng-model="country" ng-options="country as country.Country for country in Data | unique:'Country'">
    <option value="">--Countries--</option>
  </select>
<br>
  <label>City</label>
  <select ng-model="city" ng-options="city as city.City for city in Data | filter:country">
    <option value="">--Cities--</option>
  </select>
<br>
  <label>Job Category</label>
  <select ng-model="category" ng-options="category as category.Category for category in Data | filter:city">
    <option value="">--Job Category--</option>
  </select>

JS：

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';

  $scope.Data = [{
    "Country": "UK",
    "City": "London",
    "Department": "Finance",
    "rank": "2"
  }, {
    "Country": "UK",
    "City": "Leeds",
    "Department": "IT",
    "rank": "3"
  }, {
    "Country": "USA",
    "City": "Texas",
    "Department": "Risk",
    "rank": "5"
  }];

});

app.filter('unique', function() {

  return function(items, filterOn) {

    if (filterOn === false) {
      return items;
    }

    if ((filterOn || angular.isUndefined(filterOn)) && angular.isArray(items)) {
      var hashCheck = {}, newItems = [];

      var extractValueToCompare = function(item) {
        if (angular.isObject(item) && angular.isString(filterOn)) {
          return item[filterOn];
        } else {
          return item;
        }
      };

      angular.forEach(items, function(item) {
        var valueToCheck, isDuplicate = false;

        for (var i = 0; i < newItems.length; i++) {
          if (angular.equals(extractValueToCompare(newItems[i]), extractValueToCompare(item))) {
            isDuplicate = true;
            break;
          }
        }
        if (!isDuplicate) {
          newItems.push(item);
        }

      });
      items = newItems;
    }
    return items;
  };
});

这是我的傻瓜：http://plnkr.co/edit/wPCex3lJc5E0I4fSeXI1?p=preview

Answer 1

问题不在于唯一过滤器，而在于$ scope.country中的值。它不是包含国家/地区的字符串，而是包含国家/地区的对象，例如

{
    "Country": "UK",
    "City": "London",
    "Department": "Finance",
    "rank": "2"
}

如果您将城市的过滤器更改为＆＃39; country.Country＆＃39;然后它会工作。

更好的做法是将表达国家/地区中的国家/地区重命名为country.Country for country in Data |独特：＆＃39;国家＆＃39;＆＃34;类似于＆＃34; item as country.Country for country in Data |独特：＆＃39;国家＆＃39;＆＃34;并在城市过滤器中使用item.Country。

AngularJS - ng-options在使用唯一过滤器后不返回所有匹配数据

1 个答案: