Using ng-options with nested arrays

Question

I am getting some data back from my server. The data structure is:

[{"sectorName1": "nameHere",
  "subSectors": ["sub1", "sub2", "sub3"]
 },
 {"sectorName2": "nameHere",
  "subSectors": ["sub1", "sub2", "sub3"]
 }]

I am trying to display each sectors subSectors with ng-options. So when some uses the dropdown they will see all the subsectors.

I have tried this but doesn't seem to work:

<select id="selectSubSector" class="form-control" name="subSector" ng-model="item" ng-options="sec for sec in mySectors.subSectors ">
</select>

where mySectors is the data that comes back from the server.

Any suggestions?

What does not work? console errors? no options in the select? — Johannes Jander
– Johannes Jander, Commented Feb 3, 2016 at 9:46
and what is mySectors? Could it be you wanted to write mySectors[0].subsectors? — Johannes Jander
– Johannes Jander, Commented Feb 3, 2016 at 9:48
@JohannesJander mySectors is the data that comes from the server. It contains the objects as shown in the data structure in the question. Those objects then contain a nested subSectors array. And that what I want, that nested subSectors array. — Skywalker
– Skywalker, Commented Feb 3, 2016 at 9:49
Well, then you need to use mySectors[0].subsectors if you do not want to aggregate the subsectors of several sectors - which is just a simple map operation — Johannes Jander
– Johannes Jander, Commented Feb 3, 2016 at 9:52

Shashank · Accepted Answer · 2016-02-03 10:14:21Z

3

I have created a jsfiddle, have updated your response data as well:

HTML:

<div ng-app="app" ng-controller='TestCtrl'>
    <select ng-model="selectData">
        <option value="">Select</option>
        <optgroup ng-repeat='item in data' label="{{item.sectorName}}">
            <option ng-repeat="option in item.subSectors">{{option}}</option>
        </optgroup>
    </select>
</div>

JS

var app = angular.module('app', []);

app.controller('TestCtrl', function ($scope) {
    $scope.data = [{
        "sectorName": "nameHere1",
        "subSectors": ["sub1", "sub2", "sub3"]
    },
     {
         "sectorName": "nameHere2",
         "subSectors": ["sub1", "sub2", "sub3"]
     }];
});

answered Feb 3, 2016 at 10:14

Shashank

2,1002 gold badges21 silver badges40 bronze badges

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

3 Comments

Skywalker Over a year ago

Amazingly done. So simple! No idea why I couldn't think of it. Nice one mate!

Shashank Over a year ago

Thankx dude. Request to please accept the answer, if it works for your case

Chris A. Jun 7 at 3:35

optgroup is very helpful. Thx.

Python Basketball · Accepted Answer · 2016-02-03 10:11:58Z

i have create a plunker:https://plnkr.co/edit/3QkxdT6P8upwhwttUSDc?p=preview

the js code:

  $scope.mySectors = [{
    "sectorName1": "nameHere",
    "subSectors": ["sub1", "sub2", "sub3"]
  }, {
    "sectorName2": "nameHere",
    "subSectors": ["sub1", "sub2", "sub3"]
  }];

  $scope.subSectors = new Array();
  for (var i = 0; i < $scope.mySectors.length; i++) {
       for(var j=0; j< $scope.mySectors[i].subSectors.length; j++){

    $scope.subSectors.push($scope.mySectors[i].subSectors[j]);
       }
  }

the html code:

<select id="selectSubSector" class="form-control" name="subSector" ng-model="item" ng-options="sec for sec in subSectors"></select>

Thank you so much. Nice technique, I should've thought of filleting the data in the controller before sending it to the view. Learned something new. Cheers mate. +1

Nijeesh · Accepted Answer · 2016-02-03 09:50:55Z

0

mySectors is an array. So there is no mySectors.subSectors. You have to specify index for mySectors. For example mySectors[i].subsectors

answered Feb 3, 2016 at 9:50

Nijeesh

8477 silver badges11 bronze badges

Comments

A Star · Accepted Answer · 2017-09-27 17:17:46Z

I was trying to do the same thing and a solution to just display the sub-sections by using ng-if="false" or style="display: none" and ng-repeat-start/end.

<div ng-repeat="sector in Sectors">
<select>
    <option ng-repeat-start="subSectors in sector.subSectors" ng-if="false"></option>
    <option ng-repeat-end ng-repeat="subSectorValue in subSectors" value="{{ subSectorValue }}">{{ subSectorValue }}</option>
</select>
</div>

This gives us a select box with the following options.

sub1
sub2
sub3
etc

Collectives™ on Stack Overflow

Using ng-options with nested arrays

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Linked

Related