2017-10-18 28 views
0

這是我的名單控制器:如何使用嵌套的json列表顯示下拉菜單angularjs?

vm.areaList.push({"areaId":"101","areaName":"A","subAreaNames":["AA","BB" 
        ,"CC","DD","EE","FF","GG","HH"]}); 
vm.areaList.push({"areaId":"102","areaName":"B","subAreaNames":["II","JJ" ]}); 
     vm.areaList.push({"areaId":"103","areaName":"Administration","subAreaNames":["KK","LL","MM"]}); 

這是我的HTML頁面上的第一個下拉列表:

<select multiple="multiple" data-ng-options="area.areaId as area.areaName for area in AreaReportCtrl.areaList" 
      data-ng-model="AreaReportCtrl.selectedArea"> 
      </select> 

基於從此下拉列表我要填充另一個下拉列表中選擇的值相應的子區域列表。

是否可以將區域和子區域數據保存在單個數組中?如果是的話,我應該如何在基於選定區域的下一個下拉菜單中進行迭代?還是應該通過保留areaId的引用來將子區域列表存儲在不同的數組中?

+0

您可以創建基於'areaId'或新的子區域列表,當您更改的區域調用的方法和初始化子區域到另一個變量,並與新分配的價值 –

+0

我一直在尋找一個的itterate解決方案在第二個下拉列表中迭代同樣的列表,如果可能的話,並試圖避免在選擇時調用方法 –

+0

您如何期待這種方式與'select multiple'一起工作?你想彙總所有可能的子區域嗎? – Claies

回答

1
<select data-ng-options="area.areaId as area.areaName for area in AreaReportCtrl.areaList" 
      data-ng-model="AreaReportCtrl.selectedArea"> 
      </select> 

<select data-ng-options="subAreaName as subAreaName for area.subAreaNames in AreaReportCtrl.areaList|filter:{areaId:AreaReportCtrl.selectedArea}" 
      data-ng-model="AreaReportCtrl.selectedArea"> 
      </select> 
+0

這不會與'select multiple'一起工作,因爲'selectedArea'將是一個數組。 – Claies

+0

你需要多種手段才能開啓事件 –

+0

好吧。當我嘗試你的代碼單選,我得到這個錯誤:[ngOptions:iexp]預期的表達式'_select_(_label_)'的形式? for(_key _,)?_ value_ in _collection_',但在AreaReportCtrl.areaList | filter:{areaId:AreaReportCtrl.selectedArea}'中獲得了'subareaName as subareaName for area.subareaNames' –

相關問題