0

I am stuck on this particular issue with ng-options. I am creating a listbox with option grouping:

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

When I click on a group heading (Type1 or Type2), Chrome creates an empty option at the end and marks it selected. I believe it has something to do with the selection because it may not find anything 'selected' when a header is clicked, but an empty value at the bottom is not desired.

Please see the fiddle here.How can i fix it?

(The code works fine in IE9, although not sure why the fiddle doesn't)

4

3 回答 3

0

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

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

$scope.checkSelection = function() {
     if ($scope.selTemplates == null) {
        $scope.selTemplates = last;
    }
    else {
        last = $scope.selTemplates;
    }
}
于 2014-01-03T07:40:04.303 回答
0

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

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

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

于 2014-01-02T19:59:50.080 回答
-3

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

于 2014-01-02T13:51:03.190 回答