AngularJS和null選擇值取決於選擇順序

Question

我想了解一個特別奇怪的行爲，我已經注意到了AngularJS。這裏有一個基本的片斷來證明這個問題：

(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>

觀察到的行爲（使用Chrome）是這樣的：

1. 選擇通道 「A」;它會按預期自動選擇源「Y」。
2. 選擇頻道「B」;它會按預期自動選擇空源。
3. 選擇通道「C」;它仍然是一個空源，而不是像預期的那樣選擇「Z」。
4. 選擇頻道「A」;它按預期選擇「Y」。
5. 選擇通道「C」;它按預期選擇「Z」。
6. 選擇頻道「B」;它按預期選擇null，但現在select包含兩個空值。

在所有情況下，模型中的值都是正確的;這只是UI最終獨特的表現。

我可以通過明確提供一個<option>元素來代表null在源select中，但我不明白爲什麼這個代碼有這種行爲，特別是與「C」的兩種不同行爲取決於事先選擇，以及爲什麼「A」不會做同樣的事情。這是一個已知的AngularJS或Chrome錯誤還是我錯過了一些東西？

Answer 1

這是您正在使用的Angular版本中的一個錯誤。嘗試使用最新版本1.3，即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>