AngularJS - 级联动态选择列表答案

【问题标题】：AngularJS - Cascading Dynamic Select ListsAngularJS - 级联动态选择列表
【发布时间】：2016-01-30 03:07:13
【问题描述】：

我有一个包含地区、州和城市的数据集。我有 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 albiage正确，以在选择父项时从我的数据集中解析状态和城市。

【问题讨论】：

标签： javascript arrays json angularjs multidimensional-array

【解决方案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>

【讨论】：