AngularJS and null selection values depending on selection order
I am trying to understand a particularly strange behavior that I have noticed in AngularJS. Here's a basic snippet demonstrating the problem:
(function (angular) {
var module = angular.module('test', []);
module.controller('TestCtrl', ['$scope', function ($scope) {
$scope.channels = [
{ name: 'A', id: 1, defSource: 'Y' },
{ name: 'B', id: 2 },
{ name: 'C', id: 3, defSource: 'Z' },
];
$scope.sources = [ 'X', 'Y', 'Z' ];
$scope.model = {};
$scope.channelChanged = function() {
$scope.model.source = $scope.model.channel.defSource;
};
}]);
})(angular);
angular.element(document).ready(function () {
angular.bootstrap(document, ['test']);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<form ng-controller="TestCtrl">
<div>
<label>Channel: <select ng-model="model.channel"
ng-options="channel.name for channel in channels"
ng-change="channelChanged()"></select></label>
</div>
<div>
<label>Source: <select ng-model="model.source"
ng-options="source for source in sources"></select></label>
</div>
<br />
<div>Channel = {{model.channel}}</div>
<div>Source = {{model.source}}</div>
</form>
The observed behavior (with Chrome) is as follows:
- Select channel "A"; it automatically selects the "Y" source as expected.
- Select channel "B"; it automatically selects the null source as expected.
- Select channel "C"; it stays with zero source instead of selecting "Z" as expected.
- Select channel "A"; he chooses "Y" as expected.
- Select channel "C"; he chooses "Z" as expected.
- Select channel "B"; it selects zero as expected, but now the selection contains two blanks.
In all cases, the values in the model are correct; it is just a user interface that works in a special way in the end.
I can get around this by explicitly providing an element <option>
to represent null in the source selection, but I don't understand why this code has this behavior, especially with two different "C" behaviors depending on the preselection, and why "A" does not do the same the most. Is this a known bug in AngularJS or Chrome or am I missing something?
source to share
This is a bug in the version of Angular you are using. Try using the latest version 1.3
, which is 1.3.17
.
(function (angular) {
var module = angular.module('test', []);
module.controller('TestCtrl', ['$scope', function ($scope) {
$scope.channels = [
{ name: 'A', id: 1, defSource: 'Y' },
{ name: 'B', id: 2 },
{ name: 'C', id: 3, defSource: 'Z' },
];
$scope.sources = [ 'X', 'Y', 'Z' ];
$scope.model = {};
$scope.channelChanged = function() {
$scope.model.source = $scope.model.channel.defSource;
};
}]);
})(angular);
angular.element(document).ready(function () {
angular.bootstrap(document, ['test']);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.17/angular.min.js"></script>
<form ng-controller="TestCtrl">
<div>
<label>Channel: <select ng-model="model.channel"
ng-options="channel.name for channel in channels"
ng-change="channelChanged()"></select></label>
</div>
<div>
<label>Source: <select ng-model="model.source"
ng-options="source for source in sources"></select></label>
</div>
<br />
<div>Channel = {{model.channel}}</div>
<div>Source = {{model.source}}</div>
</form>
source to share