AngularJS - 级联动态选择列表

Question

我有一个包含地区，州和城市的数据集。我有3个选择列表，其中包含每种数据类型的值。我希望州和城市选择列表，只有在选中时才会填充父对象中的数据。

代码：

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-options语句正确解析我的数据集中的州和城市。

Answer 1

你的JSON结构没问题。存储正确的父值只是一个问题。看，当你做这样的一些依赖组合时，你必须存储以前选择的对象，然后显示继承子对象。看你的小提琴：

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 as location.Region for location in locations"><option value="">Select Region</option>
    </select>
    
   
   <br/>
 
State:    
<select ng-disabled="!regionSelect" ng-model="stateSelect" ng-options="state as state.stateName for state in regionSelect.States"><option value="">Select State</option>
</select>
    
    <br/>
Cities:    
<select  ng-disabled="!stateSelect" ng-model="citySelect" ng-options="city as city.cityName for city in stateSelect.Cities"><option value="">Select City</option>
</select>        
    
    <hr/>
    
    Location: {{locationId}} <br/>
    Another Location: {{anotherLocationId}}
    
    
</div>