Angularjs ngModel not selecting option in selected input
Does ngModel work differently for text type input and selection? The select control is not selected to display the original model value.
When I change the value of select, input and currentUser.field, also, but if I change the value of the input text to a different 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>
+3
source to share
1 answer
Your code should only work if you don't specify a value currentUser.field
that is not part of your parameters:
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>
+7
source to share