Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

angularjs ngModel not selecting option in select input

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>
like image 414
ericsicons Avatar asked Aug 31 '26 17:08

ericsicons


1 Answers

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>
like image 153
dting Avatar answered Sep 04 '26 01:09

dting



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!