4

2 つの依存ドロップダウンがあります。1 つは国を示し、もう 1 つは州を示しています。最初のものは国の ID だけを保存し、オブジェクト全体を 2 番目のドロップダウンのソースとして使用したいと思います。これが私がこれまでに持っているものです。これらのドロップダウンが同じ画面に多数存在する可能性があるため、一時変数 (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>
4

1 に答える 1

12

物事を単純にするために、キーが 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>

byduplicate temporary variables(countrySource)の場合、他のドロップダウンに同じモデルを使用することを意味し、国を選択すると、ページ上のすべてのcountryおよびstateドロップダウンのオプションが変更されます。

于 2013-09-06T07:47:22.807 に答える