2013-10-15 19 views
9

第一要素,我採用了棱角分明v1.0.8IE10與模型組始終沒有默認值選擇使用NG選項選擇在下拉

我有一個選擇,我使用NG選項指令與填充它在我的Controller中聲明的一組數據。

HTML片段

<body ng-controller="SelectCtrl"> 
    <select 
    ng-model="selected" 
    ng-options="o as o.caption for o in options" /> 
</body> 

代碼片斷

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' } 
    ]; 

}]); 

在Chrome中,如果您選擇讓我們說選擇3然後,正如所料,它被選中。

但是,在IE10中,如果選擇選項3,則選擇選項1

http://plnkr.co/edit/T9bbEW?p=preview

這僅當沒有默認選擇在控制器設置發生了。並且在刪除「空白」選項後執行的後續選擇會正確設置。

我懷疑它可能是This issue的副本,但我不完全確定。我並沒有真正動態地改變這裏的選項,儘管我猜想也許Angular是因爲這兩個瀏覽器中的「空白」選項都被刪除了。

但是我想要這個功能。我不想爲此選擇提供默認值,因爲用戶需要爲我做出主動選擇。

有沒有人知道這個解決方法和/或解決方案?最好不要使用JQuery來搞亂選項......

回答

8

角度增加的空白項目有一些奇怪的行爲。我們圍繞它得到的方式是通過控制器明確地添加自己的空白項並選擇它:

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] 

}]); 
+0

我擔心我不得不做那樣的事情。很高興知道我不是唯一一個這樣做的人:) – ivarni

2

我加入以下默認選項爲選擇解決這個問題。

<option value="">Pls select</option> 

所以你的選擇是這樣的:

<body ng-controller="SelectCtrl"> 
<select 
    ng-model="selected" 
    ng-options="o as o.caption for o in options"> 
    <option value="">Pls select</option> 
</select> 

我在IE 11,10,9測試這一點,它似乎是工作。 請讓我知道它是否也適用於您。

我認爲這比上面的解決方案更清潔。

+1

如果您的默認選項值不需要插值(即「請選擇」作品,「{{'請選擇'}},這可以在IE9和IE10中使用。 「 纔不是)。在這種情況下,Phil Sandler的解決方案似乎可以完成這項工作。 –