Using <select> with nested objects in Angular

Question

I'd like to create an html output like this:

 <select>
      <option value="" class="">-- Choose category --</option>
      <optgroup label="Dogs">
           <option value="0">Great Dane</option>
           <option value="1">Lab</option>
      </optgroup>
      <optgroup label="Cats">
           <option value="2">Black</option>
           <option value="3">Tabby</option>
      </optgroup>
 </select>

From an array like this:

 var animals = [{
     name: 'Dogs',
     subcats: ['great dane', 'lab']
 }, {
     name: 'Cats',
     subcats: ['tabby', 'black']
 }, ];

And have the model bound to the to set 2 values, animal.type(dog or cat) and animal.subcategory.

Tried a bunch of stuff... am thinking I'll need to use ng-repeat and hack it through... any help is much appreicated.

Do you have any control of your data object, or does it have to look like that? — Problematic
– Problematic, Commented Sep 10, 2013 at 20:09

Nikos Paraskevopoulos · Accepted Answer · 2013-09-10 21:03:52Z

10

Since you can control the model, the documentation has an example here.

Transform your model to look like:

var animals = [
    {name: "great dane", subcat: "Dogs"},
    {name: "lab",        subcat: "Dogs"},
    {name: "tabby",      subcat: "Cats"},
    {name: "black",      subcat: "Cats"}
];
// and put it in the $scope
$scope.animals = animals;

And the select would look like:

<select ng-model="..." ng-options="a.name group by a.subcat for a in animals">

The selection will be the entire animal object with name and subcat properties.

answered Sep 10, 2013 at 21:03

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

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

6 Comments

jessegavin Over a year ago

This is a good answer. I created a plunk for it so you can see it in action. plnkr.co/edit/LqeGqg1HdOIkiMQrKn72?p=preview

Andrew Samuelsen Over a year ago

Awesome, thank you. Do you know how to prepopulate the <select>... I tried setting $scope.animalSelection.name = 'great dane' but it didn't work.

Andrew Samuelsen Over a year ago

@jessegavin I can however get it to work if I do $scope.animalSelection = animals[1]. This is not ideal...

jessegavin Over a year ago

@Andypandy I would very strongly recommend that you use a library like underscore.js which gives you easy methods for dealing with collections. For example, you could use _.findWhere(animals, { name: "great dane"}) instead of animals[1]. underscorejs.org/#findWhere

Andrew Samuelsen Over a year ago

@jessegavin awesome thakns

|

Eric Drechsel · Accepted Answer · 2014-07-30 16:45:45Z

1

An alternative without needing to flatten your data would be to use nested ng-repeat directives as in this post.

answered Jul 30, 2014 at 16:45

Eric Drechsel

2,7742 gold badges23 silver badges26 bronze badges

Comments

user730009 · Accepted Answer · 2016-03-14 21:20:13Z

0

<div ng-repeat="people in People">
<label>{{people.firstName}}</label>
<select>
<option ng-repeat-start="choice in people.Choices" ng-bind="choice.Name"></option>
<option ng-repeat-end ng-repeat="opt in choice.Options" ng-bind="' - ' + opt.Name"></option>
</select>
</div>

http://plnkr.co/edit/2vj4PK?p=preview

answered Mar 14, 2016 at 21:20

user730009

3231 gold badge5 silver badges20 bronze badges

Collectives™ on Stack Overflow

Using <select> with nested objects in Angular

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related