Select data binding for an object

Question

I'm getting a strange behavior when binding the following object to a select:

REGIONSH = {0:"All Regions",1:"Europe",2:"North America"};

HTML (where region is a integer for key):

<select ng-model="REGIONSH[region]" ng-options="name for(key,name) in REGIONSH">

The behavior is that the list is populated correctly with the correct option selected, but when I change the region variable the selected entry changes fine, but suddenly both the original and the new selections are named the same thing.

For example, I would select the second element in the list, and the original one would be renamed to "North America" from "All Regions".

The desired behavior is to have a select where I can chose from each of the values in the object while having the key as the option's value.

Answer 1

The way you have your html:

<select ng-model="REGIONSH[region]" ng-options="name for(key,name) in REGIONSH">

It will display the list correctly, but whenever the user makes a choice the name of the region ("name for(key,name)") will be bound to wherever ng-model is pointing to.

Meaning when the user makes a choice for say the first option, it ng-model will effectively perform

REGIONSH[region] = /*name of the selected region*/;

Which assigns a name to the region at index region.

What you probably want is ng-model="region", so the values are assigned to the region variable, and not the options. ( Or any other variable you want to store the choice in; probably not in REGIONSH though )

Then you'd also need ng-options="key as name for (key, name) in REGIONSH, so that it still displays the name, but now assigns key whenever the user makes a selection. ( Read here on the many ng-options formats you can use )

Meaning when a selection is made it performs

region = /*key of the selected region*/;

The final result would be

<select ng-model="region" ng-options="key as name for(key,name) in REGIONSH">