ng-select with an object and its properties in angularjs

All we need is an easy explanation of the problem, so here it is.

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.

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

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.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply