How to use angular to populate the select drop down list from an object withing an object.

Question

I have the following JSON Object

 $scope.items = [
    { id: 1, name: 'Red',sizes:[{size:'s'},{size:'b'}]  },
    { id: 2, name: 'Green',sizes:[{size:'s'},{size:'b'}]   },
    { id: 3, name: 'Yellow',sizes:[{size:'s'},{size:'b'}]   }];

I'm trying to create a select option like the one below

<select id="s1" >
    <option value="?" selected="selected"></option>
    <option value="Red S">Red S</option>
    <option value="Red b">Red b</option>
    <option value="Green S">Green S</option>
    <option value="Green b">Green b</option>
    <option value="Yellow S">Green S</option>
    <option value="Yellow b">Green b</option>

</select>

Is it possible to achieve this using ng-options, if not what are my other options using angular.

Your options are well explained in the docs : docs.angularjs.org/api/ng/directive/select — Maen
– Maen, Commented Dec 31, 2015 at 0:20

jcc · Accepted Answer · 2015-12-31 00:47:03Z

3

Anything is possible with Angular ;) But for something like this (the data in that shape), using option groups would be your only option. To display them as a straight list of options as you showed, you would have to flatten your object first, and then do a ng-options on the new object/array.

<select id="s1" ng-model="selected">
    <option value=""></option>
    <optgroup ng-repeat="item in items" label="{{item.name}}">
      <option ng-repeat="size in item.sizes">{{item.name + ' ' + size.size}}</option>
    </optgroup>
</select>

Check out this Plunkr.

edited Dec 31, 2015 at 0:47

answered Dec 31, 2015 at 0:41

jcc

1,1471 gold badge12 silver badges33 bronze badges

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

Collectives™ on Stack Overflow

How to use angular to populate the select drop down list from an object withing an object.

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related