angular js中带有json数据的依赖下拉列表

Question

我正在尝试使用 JSON 数据制作依赖下拉列表

使用（for in）获取将其集成到下拉列表中的密钥，但没有用，无论我每次通过密钥访问 json 数据以获取此结构中的值时搜索的内容，我都能将其放入下拉菜单 [{name:"india"},{name:"usa"}]。但是使用当前的 json 结构我无法做到。

HTML：-

<div ng-controller="myCtrl3">
 <select>
  <option>Select Country</option>
  <option ng-repeat="country in chooseCountries"></option>
  <option ng-repeat="states in country"></option>
  <option ng-repeat="city in states"></option>
 </select>
</div>

JS：-

app.controller('myCtrl3',function($scope,$http){
 $http({
  url:'js/country.json',
  method:'GET'
 })
 .then(function(response){
 $scope.chooseCountries = response.data;
 });
});

JSON(country.json):-

[{
"INDIA": {
    "KARNATAKA": ["BANGALORE", "UDUPI", "MANGALORE"],
    "TELENGANA": ["HYDERABAD", "GUNTUR", "SHANKERPALLY"]
},
"USA": {
    "CALIFORNIA": ["SAN JOSE", "SAN HOSE", "NEW YORK"],
    "FLORIDA": ["MIAMI", "DENVER"],
    "INDIAPOLIS": ["INDIANA", "MASACHUTTEUS"]
},
"AUSTRALIA": {
    "NEW SOUTH WALES": ["SYDNEY", "BRISBANE"],
    "QUEENSLAND": ["PERTH", "VICTORIA"],
    "WESTERN AUSTRALIA": ["MELBOURNE", "MCG"]
}
}]

如果我单击印度，我希望输出的第一个下拉列表应显示印度、美国、澳大利亚，如果单击印度，第二个下拉列表应在第三个下拉列表中显示 KARNATAKA 和 TELENGANA，它应显示 BANGALORE、UDUPI、MANGALORE。没有得到任何错误但无法获得所需的输出。

Answer 1

我猜你不能改变返回的 JSON 的格式。如果是这种情况，您没有可以使用的结构良好的对象层次结构，因此您将不得不回退到使用(key, value)。下面是一个简单的示例，说明如何完成您所追求的目标。

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.countryChoices = [{
      "INDIA": {
        "KARNATAKA": ["BANGALORE", "UDUPI", "MANGALORE"],
        "TELENGANA": ["HYDERABAD", "GUNTUR", "SHANKERPALLY"]
      },
      "USA": {
        "CALIFORNIA": ["SAN JOSE", "SAN HOSE", "NEW YORK"],
        "FLORIDA": ["MIAMI", "DENVER"],
        "INDIAPOLIS": ["INDIANA", "MASACHUTTEUS"]
      },
      "AUSTRALIA": {
        "NEW SOUTH WALES": ["SYDNEY", "BRISBANE"],
        "QUEENSLAND": ["PERTH", "VICTORIA"],
        "WESTERN AUSTRALIA": ["MELBOURNE", "MCG"]
      }
    }];
    $scope.selectedCountry = {};
    $scope.selectedState = {};
    $scope.selectedCity = '';
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div>
    <select ng-model="selectedCountry" ng-options="value as key for (key, value) in countryChoices[0]"></select>
  </div>
  <div>
    <select ng-model="selectedState" ng-options="value as key for (key,value) in selectedCountry"></select>
  </div>
  <div>
    <select ng-model="selectedCity" ng-options="value as value for value in selectedState"></select>
  </div>
</div>

Answer 2

为了让它工作，你的 json 数据应该是这样的：

[{
  country: "INDIA",
  states: [
  {
    "KARNATAKA": {
      cities: ["BANGALORE", "UDUPI", "MANGALORE"]
    }
  }
}]

希望对你有帮助...