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

时间:2013-10-15 18:05:17

标签: angularjs select internet-explorer-10

我使用的是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>

代码段

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搞乱选项......

2 个答案:

答案 0 :(得分: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]

}]);

答案 1 :(得分:2)

我通过在select中添加以下默认选项来解决此问题。

<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中进行了测试,它似乎正在运行。 如果它也适合你,请告诉我。

我认为这比上述解决方案更清晰。