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

【问题标题】：IE10 with select using ng-options with no default value set in model always selects first element in dropdownIE10 使用 ng-options 选择，模型中没有设置默认值，总是选择下拉列表中的第一个元素
【发布时间】：2013-10-23 15:49:21
【问题描述】：

我正在使用 Angular v1.0.8

我有一个选择，我正在使用 ng-options 指令用我的控制器中声明的数据数组填充它。

HTML sn-p

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

代码sn-p

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

【问题讨论】：

标签： angularjs select internet-explorer-10

【解决方案1】：

angular 添加的空白项有一些奇怪的行为。我们解决它的方法是显式添加我们自己的空白项并通过控制器选择它：

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]

}]);

【讨论】：

我担心我不得不做这样的事情。很高兴知道至少我不是唯一一个这样做的人:)

【解决方案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 中对此进行了测试，它似乎可以正常工作。请让我知道它是否也适合您。

我认为这比上述解决方案更干净。

【讨论】：

如果您的默认选项值不需要插值，这适用于 IE9 和 IE10（即“请选择”有效，“{{'请选择'}}”无效）。在这种情况下，Phil Sandler 的解决方案在数组中添加了一个空选项似乎可以完成这项工作。