javascript - 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>

I can't seem to get the ng-options verbiage correct to parse the states and cities from my dataset when the parent item is selected.

Answer 1

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

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>