Question

我对ng-options的这个特殊问题感到困惑。我正在创建一个带有选项分组的列表框：

<select ng-model="selTemplates" size="3" style="width: 150px" 
ng-options="template.Name group by template.Type for template in userTemplates">
</select>

当我点击组标题（Type1或Type2）时，Chrome会在结尾处创建一个空选项并将其标记为已选中。我认为它与选择有关，因为单击标题时可能找不到任何“选中”的内容，但底部不需要空值。

请看小提琴here。我该如何解决？

（该代码在IE9中工作正常，但不确定小提琴为什么不这样做）

Answer 1

ng-options添加空选项（如果情况，如果ng-model当前绑定的值在选项列表中不存在。这可以防止由于限制为空选择而覆盖值（这在例如knockoutjs中经常出现问题）。

单击选项组清除选择并添加空选项。如果在选择列表下面添加调试<div>{{selTemplates}}</div>，您可以看到它。此外，即使指定了size或multiple属性的静态选择也会在单击选项时清除其选择。如果省略大小（对于常规下拉列表），则单击optgroup不会清除所选值。

我不确定这个浏览器是否存在不一致或预期的行为（如果你说它在IE中有效），但考虑用自定义HTML替换select模拟列表选择。

Answer 2

看起来不一致的浏览器实现是原因。在点击选项标题时，Chrome会清除选择，而IE则不会，这就是Chrome在底部插入新空行的原因。

作为一种解决方法，我将最后选择的值保存在变量中，如果用户点击标题（这将使选择为空），我将恢复最后一个选择。见fiddle。不完全漂亮，但完成了工作。

$scope.checkSelection = function() {
     if ($scope.selTemplates == null) {
        $scope.selTemplates = last;
    }
    else {
        last = $scope.selTemplates;
    }
}

Answer 3

在ng-init="selTemplates=userTemplates[0]"中添加<select> 您可以删除控制器中的"$scope.selTemplates = ***"

当单击列表框组标题时，ng-options在末尾创建一个空选项

3 个答案: