CODEWITHSUNDEEP
javascriptangularjsangular-ngmodel
jcubic
jcubic

Reputation: 66480

Angular select doesn't respond to ng-model changes

I have a select that looks like this:

{{vm.selected}}
{{vm.items}}
<select ng-options="item.value as item.label for item in vm.items track by item.value" ng-model="vm.selected">
</select>

My items array looks like this:

this.items = [  
  {  
     "label":"Foo Bar",
     "value":"foobar"
  },
  {  
     "label":"Baz Quux",
     "value":"quux"
  }
];

and the item vm.selected is "foobar"

both bindings are displayed correctly above the select but the item is not selected. When I inspect the select in developer tools I have this as the first selected item:

<option value="?" selected="selected"></option>

Also when I am using click on this element with ng-click="vm.selected = 'quux'" nothing is changed. The {{vm.selected}} is always updated. Anybody have a clue what's wrong?

Upvotes: 2

Views: 400

Answers (2)

jusopi
jusopi

Reputation: 6813

The track by item.value is problematic. If you remove that, you can see that after you select a value, vm.selected will present itself properly and the select works.

http://codepen.io/jusopi/pen/PbeoWN

Upvotes: 1

bhantol
bhantol

Reputation: 9606

Your ng-option expression will not work according to official ngOption documentation

Quoting

but this will not work:

item.subItem as item.label for item in items track by item.id

So your

ng-options="item.value as item.label for item in vm.items track by item.value"

won't work.

Instead make yore expression of the following format:

item as item.label for item in items track by item.id

Upvotes: 1

Related Questions