角度js中帶有json數據的依賴下拉列表

Question

我正在嘗試使用 JSON 數據進行依賴下拉

用於（用於）獲取將其集成到下拉列表中的密鑰但不起作用，無論我每次通過鍵訪問 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"]
}
}]

我希望輸出的第一個下拉列表應該顯示 INDIA、USA、AUSTRALIA 如果我單擊 INDIA 第二個下拉列表應該在第三個下拉列表中顯示 KARNATAKA 和 TELENGANA 如果我單擊 KARNATAKA 它應該顯示 BANGALORE、UDUPI、MANGALORE。沒有任何錯誤，但是coudn沒有得到想要的輸出。

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"]
    }
  }
}]

希望能幫助到你...