AngularJS - 依赖下拉列表：在模型中存储一个值，使用其他值作为下一个下拉列表的来源

【问题标题】：AngularJS - dependent dropdowns: storing one value in model, using other as source of the next dropdownAngularJS - 依赖下拉列表：在模型中存储一个值，使用其他值作为下一个下拉列表的来源
【发布时间】：2016-02-10 14:56:39
【问题描述】：

我有两个相关的下拉菜单。一个显示国家另一个国家。我希望第一个只保存国家/地区 ID，但使用整个对象作为源对于第二个下拉菜单。这是我到目前为止所拥有的。在同一个屏幕中可能有许多这样的下拉菜单，这可能会使事情复杂化，因为我需要复制临时变量（countrySource）。有什么建议吗？

<select name="country" ng-model="countrySource" ng-options="cntr as cntr.label for cntr in countries" ng-change="country=countrySource.id">
</select>

<select name="state" ng-model="state" ng-options="st.id as st.label for st in countrySource.states">
</select>

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

为简单起见，您可以如下重构模型，其中键充当 id：

$scope.countries = {
    "c1" : {
        label : "Country 1",        
        states:{
            "s1":{
                label:"State 1"             
            },
            "s2" : {
                label:"State 2"             
            }
        }
    },
    "c2" : {
        label:"Country 2",      
        states:{
            "s3":{
                label:"State 3"             
            },
            "s4" : {
                label:"State 4"             
            }
        }
    }
};

HTML

<select ng-model="country" ng-options="countryId as countryDetails.label 
for (countryId, countryDetails) in countries">
</select>

<select name="state" ng-model="state" ng-options="stateId as stateDetails.label 
for (stateId, stateDetails) in countries[country]['states']">
</select>

如果duplicate temporary variables(countrySource)，您的意思是对其他下拉菜单使用相同的模型，选择一个国家将更改页面上所有country 和state 下拉菜单的选项。

【讨论】：