Menu
I am using Angular v1.0.8
I have a select and I am using ng-options directive to populate it with an array of data declared in my Controller.
HTML snippet
<body ng-controller="SelectCtrl">
<select
ng-model="selected"
ng-options="o as o.caption for o in options" />
</body>
Code snippet
angular.module('app', [])
.controller('SelectCtrl', ['$scope', function($scope) {
$scope.options = [
{ key: 1, caption: '1' },
{ key: 2, caption: '2' },
{ key: 3, caption: '3' },
{ key: 4, caption: '4' },
{ key: 5, caption: '5' }
];
}]);
In Chrome, if you select let's say option 3 then, as expected, it gets selected.
In IE10, however, if you select option 3 then option 1 gets selected.
(http://plnkr.co/edit/T9bbEW?p=preview)
This only happens when there is no default selection set in the controller. And subsequent selections done after the "blank" choice is removed gets set correctly.
I suspect that it might possibly be a duplicate of This issue but I am not entirely sure. I am not really dynamically changing the options here although I suppose maybe Angular is since the "blank" choice are getting removed in both browsers.
I do however want this functionality. I don't want to provide a default value for this select because the user needs to make an active choice for me.
Does anyone know a workaround and/or solution for this? Preferably one that does not involve messing with the options using JQuery...
880
The blank item that angular adds has some odd behavior. The way we've gotten around it is to explicitly add our own blank item and select it via the controller:
angular.module('app', []).controller('SelectCtrl', ['$scope', function($scope) {
$scope.options = [
{ key: 0, caption: ' ' },
{ key: 1, caption: '1' },
{ key: 2, caption: '2' },
{ key: 3, caption: '3' },
{ key: 4, caption: '4' },
{ key: 5, caption: '5' }
];
$scope.selected = $scope.options[0]
}]);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
