How to display a dropdown menu using nested json list angularjs?

Question

This is my list in the controller:

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"]});

And this is the first dropdown on my html page:

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

Based on the value selected from this dropdown I want to populate another dropdown with the corresponding sub-areas list.

Is it possible to keep the area and sub area data in single array ? If yes, how shall I iterate it in ng-options of the next dropdown based on the selected area? Or should I store the sub-area list in a different array by keeping a reference of the areaId ?

You can create a new sub area list based on areaId or when you change the area call a method and initialise the sub areas to another variable and the itterate with the newly assigned value — phani indra
– phani indra, Commented Oct 18, 2017 at 9:21
I was looking for a solution to iterate the same list in the second dropdown also if possible and was trying to avoid calling a method on selection if that is possible — A_J
– A_J, Commented Oct 18, 2017 at 9:24
how are you expecting this to work with select multiple? are you wanting to aggregate all the possible sub-areas? — Claies
– Claies, Commented Oct 18, 2017 at 9:33
@Claies, user can select multiple areas and all the corresponding sub areas should be displayed in another list — A_J
– A_J, Commented Oct 18, 2017 at 9:34
so then that's a yes, you want to aggregate the sub-areas? that won't be possible without firing some function. — Claies
– Claies, Commented Oct 18, 2017 at 9:35

phani indra · Accepted Answer · 2017-10-18 09:37:47Z

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>

answered Oct 18, 2017 at 9:37

phani indra

2531 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Claies Over a year ago

this won't work with select multiple, since selectedArea will be an array.

phani indra Over a year ago

you need multiple means you need to fire an event

A_J Over a year ago

Ok got it. When I try your code for single selection, I get this error: [ngOptions:iexp] Expected expression in form of 'select (as label)? for (key,)?_value_ in collection' but got 'subareaName as subareaName for area.subareaNames in AreaReportCtrl.areaList|filter:{areaId:AreaReportCtrl.selectedArea}'

Collectives™ on Stack Overflow

How to display a dropdown menu using nested json list angularjs?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related