过去几周我一直在使用AngularJS,有一件事真的困扰着我,即使在http://docs.angularjs.org/api/ng.directive:select的规范中尝试了所有的排列或配置,我仍然得到一个空选项作为select元素的第一子元素。

这是玉:

select.span9(ng-model='form.type', required, ng-options='option.value as option.name for option in typeOptions');

下面是控制器:

$scope.typeOptions = [
    { name: 'Feature', value: 'feature' },
    { name: 'Bug', value: 'bug' },
    { name: 'Enhancement', value: 'enhancement' }
];

最后,这里是生成的HTML:

<select ng-model="form.type" required="required" ng-options="option.value as option.name for option in typeOptions" class="span9 ng-pristine ng-invalid ng-invalid-required">
    <option value="?" selected="selected"></option>
    <option value="0">Feature</option>
    <option value="1">Bug</option>
    <option value="2">Enhancement</option>
</select>

我需要做什么才能摆脱它?

附注:没有这个也可以工作,但是如果使用select2而没有多重选择,它看起来很奇怪。


当前回答

我想补充一点,如果初始值来自某个父元素或1.5组件的绑定,请确保传递了正确的类型。如果在绑定中使用@,传递的变量将是string,如果选项为eg。整数,则会显示空选项。

正确解析init中的值,或者使用<而不是@绑定(为了提高性能,除非必要,建议少使用)。

其他回答

一个快速的解决方案:

select option:empty { display:none }

希望它能帮助到别人。理想情况下,选择的答案应该是方法,但如果这是不可能的,那么应该作为补丁工作。

Angular < 1.4

对于任何将“null”作为其中一个选项的有效值的人(因此,想象“null”是下面示例中的typeOptions中的一个项的值),我发现确保自动添加的选项被隐藏的最简单的方法是使用ng-if。

<select ng-options="option.value as option.name for option in typeOptions">
    <option value="" ng-if="false"></option>
</select>

为什么是ng-if而不是ng-hide?因为你想要css选择器,将目标内的第一个选项上面选择目标“真实”选项,而不是一个隐藏的。当您使用量角器进行端到端测试时,以及(无论出于何种原因)使用by.css()来瞄准选择选项时,它非常有用。

Angular >= 1.4

由于重构了select和options指令,使用ng-if不再是一个可行的选项,所以你必须转向ng-show="false"来让它再次工作。

我使用的是Angular 1.4x,我找到了这个例子,所以我用ng-init在select中设置初始值:

<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.id for item in items"></select>

当ng-model引用的值在传递给ng-options的选项集中不存在时,会生成空选项。这是为了防止意外的模型选择:AngularJS可以看到初始模型是未定义的,或者不在选项集中,并且不想自己决定模型值。

如果你想去掉空选项,只需要在你的控制器中选择一个初始值,比如:

$scope.form.type = $scope.typeOptions[0].value;

这里是jsFiddle: http://jsfiddle.net/MTfRD/3/

简而言之:空选项意味着没有选择有效的模型(有效的意思是:从选项集中)。您需要选择一个有效的模型值来去除这个空选项。

一个简单的解决方案是设置一个空值的选项“”我发现这消除了额外的未定义选项。