AngularJS - 依赖的下拉菜单：模型存储一个值，使用其他作为下一个下拉源 [英] AngularJS - dependent dropdowns: storing one value in model, using other as source of the next dropdown

问题描述

我有两个相关的下拉菜单。其中显示各国的另一个状态。
我想第一个来保存刚才的国家ID，但使用整个对象作为源
对于第二个下拉。这里是我到目前为止所。那么可能有许多这样的下拉菜单中在同一个屏幕上，这样，因为我需要重复的临时变量（countrySource）可能使事情变得复杂。有什么建议？

 ＆LT;选择名称=国NG-模式=countrySourceNG选项=CNTR作为国家cntr.label为CNTRNG变化=国家= countrySource .ID＆GT;
＆LT; /选择＆GT;＆LT;选择名称=状态NG模型=状态NG选项=st.id在countrySource.states st.label为ST＆GT;
＆LT; /选择＆GT;
 

解决方案

为了简单起见，你可以调整你的模型如下，其中键作为IDS：

  $ scope.countries = {
    C1：{
        标签：国1，
        状态：{
            S1：{
                标签：国家1
            }，
            S2：{
                标签：国家2
            }
        }
    }，
    C2：{
        标签：国家2
        状态：{
            S3：{
                标签：国家3
            }，
            S4：{
                标签：国4
            }
        }
    }
};
 

HTML

 ＆LT;选择NG模型=国NG选项=countryId为countryDetails.label
对于（countryId，countryDetails）在国家＆GT;
＆LT; /选择＆GT;＆LT;选择名称=状态NG模型=状态NG选项=STATEID为stateDetails.label
对于（STATEID，stateDetails）在国家[国家] ['国家']＆GT;
＆LT; /选择＆GT;
 

如果按复制临时变量（countrySource），你的意思是使用其他下拉菜单相同的车型，选择一个国家会改变所有的<$ C $选项C>国家和状态页上的下拉列表中。

I have two dependent dropdowns. One shows countries another states. I would like the first one to save just the country id but use the entire object as source for the second dropdown. Here's what I have so far. There could potentially be many of these dropdowns in a same screen so that could complicate things because I would need to duplicate temporary variables(countrySource). Any suggestions?

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

解决方案

To keep things simple you can restructure your model as below where the keys act as ids:

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

If by duplicate temporary variables(countrySource), you mean to use the same models for other dropdowns, selecting a country would change the options of all the country and state dropdowns on the page.

这篇关于AngularJS - 依赖的下拉菜单：模型存储一个值，使用其他作为下一个下拉源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！