IE10选择使用ng-options而模型中没有设置默认值总是选择下拉列表中的第一个元素

iva*_*rni 9 select internet-explorer-10 angularjs

我使用的是Angular v1.0.8

我有一个选择,我正在使用ng-options指令用我在Controller中声明的数据数组填充它.

HTML片段

<body ng-controller="SelectCtrl">
  <select 
    ng-model="selected" 
    ng-options="o as o.caption for o in options" />
</body>
Run Code Online (Sandbox Code Playgroud)

代码段

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

}]);
Run Code Online (Sandbox Code Playgroud)

在Chrome中,如果您选择让我们说选项3然后按预期选择它.

在IE10,不过,如果您选择选项3,然后选项1被选中.

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

仅当控制器中没有设置默认选择时,才会发生这种情况.在删除"空白"选项后执行的后续选择将被正确设置.

我怀疑它可能是这个问题的重复,但我不完全确定.我并没有真正动态地改变这里的选项,虽然我想也许Angular是因为在两个浏览器中都删除了"空白"选项.

但我想要这个功能.我不想为此选择提供默认值,因为用户需要为我做出主动选择.

有没有人知道解决方法和/或解决方案?最好不要使用JQuery搞乱选项...

Phi*_*ler 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]

}]);
Run Code Online (Sandbox Code Playgroud)