Angularjs IE10带有select using ng选项且在模型中未设置默认值时，始终选择下拉列表中的第一个元素_Angularjs_Select_Internet Explorer 10

Angularjs IE10带有select using ng选项且在模型中未设置默认值时，始终选择下拉列表中的第一个元素

angularjs select

Angularjs IE10带有select using ng选项且在模型中未设置默认值时，始终选择下拉列表中的第一个元素,angularjs,select,internet-explorer-10,Angularjs,Select,Internet Explorer 10,我使用的是Angular v1.0.8 我有一个select，我正在使用ng options指令用控制器中声明的数据数组填充它 HTML代码段 <body ng-controller="SelectCtrl"> <select ng-model="selected" ng-options="o as o.caption for o in options" /> </body> 在Chrome中，如果您选择了选项3，那么正如预期的那样，

我使用的是Angular v1.0.8

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

HTML代码段

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

在Chrome中，如果您选择了选项

，那么正如预期的那样，它会被选中

然而，在IE10中，如果您选择选项

，则会选择选项

（）

只有在控制器中没有设置默认选择时，才会发生这种情况。删除“空白”选项后所做的后续选择将正确设置

我怀疑它可能是一个复制品，但我不能完全肯定。我并不是在动态地改变这里的选项，尽管我想可能是因为“空白”选项在两个浏览器中都被删除了

然而，我确实想要这个功能。我不想为此选择提供默认值，因为用户需要为我进行活动选择

有人知道这方面的解决方法和/或解决方案吗？最好是不涉及使用JQuery处理选项的选项…

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]

}]);

我通过在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>


请选择

我在IE11，10，9中测试了这个，它似乎是有效的。请让我知道它是否也适合你

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

我担心我不得不这样做。很高兴知道我不是唯一一个这样做的人，至少：）如果您的默认选项值不需要插值（即“请选择”有效，{{Please select'}}}”不需要插值，那么这在IE9和IE10中有效。Phil Sandler的解决方案是在数组中预先设置一个空选项，在这种情况下，它似乎可以完成任务。

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