javascript - AngularJS-级联动态选择列表

我有一个包含区域，州和城市的数据集。我有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选项空话正确选择父项目时，从我的数据集解析州和城市。

最佳答案

您的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>