2
我有一個包含地區，州和城市的數據集。我有3個選擇列表，其中包含每個數據類型的值。我希望州和城市的選擇列表只有在選擇它們的父對象時才填充數據。AngularJS - 級聯動態選擇列表
代碼：
https://jsfiddle.net/tedleeatlanta/4egcw5zs/18/
function TheController($scope) {
$scope.locations = [
{
"Region": "USA",
"States": [
{
"stateName": "Georgia",
"Cities": [
{
"cityName": "Dunwoody"
}
]
},
{
"stateName": "Florida",
"Cities": [
{
"cityName": "Clearwater"
}
]
}
]
},
{
"Region": "Canada",
"States": [
{
"stateName": "Quebec",
"Cities": [
{
"cityName": "SomeplaceElse"
}
]
}
]
},
{
"Region": "Europe",
"States": [
{
"stateName": "England",
"Cities": [
{
"cityName": "London"
}
]
},
{
"stateName": "France",
"Cities": [
{
"cityName": "Paris"
}
]
},
{
"stateName": "Germany",
"Cities": [
{
"cityName": "Munich"
}
]
},
{
"stateName": "Spain",
"Cities": [
{
"cityName": "Portugal"
}
]
}
]
}
];
}<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="TheController" ng-app>
Region:
<select ng-model="regionSelect" ng-options="location.Region as location.Region for location in locations"><option value="">Select Region</option>
</select>
<br/>
State:
<select ng-disabled="!regionSelect" ng-model="stateSelect" ng-options="location.Region.States.stateName as location.Region.States.stateName for location in locations"><option value="">Select State</option>
</select>
<br/>
Cities:
<select ng-disabled="!stateSelect" ng-model="citySelect" ng-options="location.{{regionSelect}}.{{stateSelect}}.stateName as location.Region.States.stateName for location in locations"><option value="">Select City</option>
</select>
<hr/>
Location: {{locationId}} <br/>
Another Location: {{anotherLocationId}}
</div>我似乎無法得到NG選項空話正確的，從我的數據集解析州和城市當父項被選中。