Javascript 依赖AngularJS的下拉列表:在模型中存储一个值,使用另一个值作为下一个下拉列表的源
我有两个相关的下拉列表。一个国家代表另一个国家。 我希望第一个只保存国家id,但使用整个对象作为源 对于第二个下拉列表。这是我到目前为止所拥有的。在同一个屏幕中可能会有许多这样的下拉列表,这可能会使事情变得复杂,因为我需要复制临时变量(countrySource)。有什么建议吗Javascript 依赖AngularJS的下拉列表:在模型中存储一个值,使用另一个值作为下一个下拉列表的源,javascript,angularjs,Javascript,Angularjs,我有两个相关的下拉列表。一个国家代表另一个国家。 我希望第一个只保存国家id,但使用整个对象作为源 对于第二个下拉列表。这是我到目前为止所拥有的。在同一个屏幕中可能会有许多这样的下拉列表,这可能会使事情变得复杂,因为我需要复制临时变量(countrySource)。有什么建议吗 <select name="country" ng-model="countrySource" ng-options="cntr as cntr.label for cntr in countries" ng-ch
<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>
为了简化操作,您可以按如下方式重新构造模型,其中键充当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
如果通过复制临时变量(countrySource)
,您的意思是对其他下拉列表使用相同的模型,选择一个国家将更改页面上所有国家
和州
下拉列表的选项
<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>