9

我正在使用 Angular v1.0.8

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

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

4

2 回答 2

8

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]

}]);
于 2013-10-15T18:33:24.807 回答
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 中对此进行了测试，它似乎可以正常工作。请让我知道它是否也适合您。

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

于 2015-01-08T23:32:19.210 回答