ng-select with an object and its properties in angularjs

Question

I have been trying to figure out how to use an array if objects as the key values for an ng-select directive

this is the data I want to use

$scope.selectValues [
    {name: "Options 1", value: "11"}, 
    {name: "Options 2", value: "22"}
    {name: "Options 3", value: "33"}
];

and I want the output to be

<select>
    <option value="11">Options 1</option>
    <option value="22">Options 2</option>
    <option value="33">Options 3</option>
</select>

Can anyone explain how to do this ? and show a an example of the directive set up? I have looked at the docs but they don't have an example that fits for the this model.

tungd · Accepted Answer · 2013-12-20 13:31:36Z

28

ng-options supports both array and object based data source. For example:

Array based data source:

$scope.options = ["Blue", "Red", "Yellow"]

<select ng-model="selected"
        ng-options="for o in options">

Object based data source:

$scope.options = {
  "Blue": "color_1",
  "Red": "color_2",
  "Green": "color_3"
}

<select ng-model="selected"
        ng-options="name for (name, value) in options">

However, you are using an incompatible data structure for the array based option. You can use like this:

<select ng-model="selected"
        ng-options="o.name for o in options">

and use the selected value as selected.value. (selected is bound to one of the objects in the array). This won't work if you want to submit the form via HTTP, so in this case you should convert the options to one of the data structure mentioned above.

I've included these three usage here: http://plnkr.co/IEBQkqJNifY5MZWloDP6

Edit: So I looked at the docs again today and found the way to work with your original data structure.

<select ng-model="selected"
        ng-options="o.value as o.name for o in options">

The plnkr is updated also.

edited Dec 20, 2013 at 13:31

answered Dec 19, 2013 at 2:56

tungd

15k6 gold badges43 silver badges45 bronze badges

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

4 Comments

Subtubes Over a year ago

Thanks this worked. The docs on this are very limited but now I changed my data structure and all works fine. Thanks again

tungd Over a year ago

Sorry I overlooked the docs. There's a way to work with the original data structure, please see my edit.

Trattles Over a year ago

@tungd your third example actually does not work. It sets the values to the indices and not to o.value I just realized you need to add "track by o.value" in order for the values to work properly

tungd Over a year ago

I'm not sure what example you're talking about, could you please add more detail? I checked the Plnkr and all the examples work as expected. Thanks.

Collectives™ on Stack Overflow

ng-select with an object and its properties in angularjs

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related