angularjs ngModel not selecting option in select input

5.9k views Asked by At

Does ngModel working differently for input type text and select? The select control is not selected to reflect the initial model value.

When I change the value of the select, input and currentUser.field change also, but if I change the value of input text to another key nothing happens to select.

{{currentUser.field}} // show correct field field key (number) val

// ng-model works => show correct field key (number) val
<input ng-model="currentUser.field" type="text" /> 

// <option value="?" selected="selected" label=""></option> is selected
<select ng-model="currentUser.field" 
   ng-options='item.key as item.value for item in currentUser.collections.field '>
</select>

// only works with input text and {{currentUser.field}}
 <button ng-click='currentUser.field = 305'>select field (int)</button>
 <button ng-click='currentUser.field = "305"'>select field (string)</button>
1

There are 1 answers

1
dting On BEST ANSWER

Your code should just work unless you are setting a value to currentUser.field that is not in your options:

var app = angular.module('app', []);

app.controller('myController', function($scope) {
  $scope.currentUser = {
    collections: {
      field: [{
        key: '1',
        value: 'one'
      }, {
        key: '2',
        value: 'two'
      }, {
        key: '3',
        value: 'three'
      }]
    }
  };
  $scope.currentUser.field = "2";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='app' ng-controller='myController'>
  <h3>expression</h3>
  {{currentUser.field}}
  
  <h3>input</h3>
  <input ng-model='currentUser.field' type='text'>
  
  <h3>select</h3>
  <select ng-model='currentUser.field' ng-options='item.key as item.value for item in currentUser.collections.field'></select>
  
  <h3>buttons</h3>
  <button ng-click='currentUser.field="305"'>305</button>
  <button ng-click='currentUser.field="1"'>1</button>
</div>