2017-10-18 51 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' –