为什么AngularJS在select中包含一个空选项?
在过去的几周里,我一直和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>
我需要做些什么才能摆脱它?
PS:事情没有这样做也行,但是如果你使用select2而没有多重选择,那看起来很奇怪。
当传递给ng-options
一组选项中不存在由ng-model
引用的值时,会生成空option
。 这发生的目的是为了防止意外的模型选择:AngularJS可以看到初始模型或者未定义或者不在选项集合中,并且不想自行决定模型值。
如果你想摆脱空的选择,只需在控制器中选择一个初始值,如下所示:
$scope.form.type = $scope.typeOptions[0].value;
这里是jsFiddle:http://jsfiddle.net/MTfRD/3/
简而言之:空选项意味着没有选择有效的模型(有效的我的意思是:从选项集合中选择)。 您需要选择一个有效的模型值来摆脱这个空的选项。
如果你想要一个初始值,请参阅@ pkozlowski.opensource的答案,其中FYI也可以在视图(而不是控制器)中使用ng-init实现:
<select ng-model="form.type" required="required" ng-init="form.type='bug'"
ng-options="option.value as option.name for option in typeOptions" >
</select>
如果你不想要一个初始值,“一个硬编码的元素,其值设置为一个空字符串,可以嵌套到元素中,这个元素将代表null或”未选择“选项”:
<select ng-model="form.type" required="required"
ng-options="option.value as option.name for option in typeOptions" >
<option style="display:none" value="">select a type</option>
</select>
角度<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选择器选择目标“真实”选项,而不是隐藏的选项。 当您使用量角器进行e2e测试时(以及由于某种原因)您使用by.css()来定位选择选项时,它会很有用。
Angular> = 1.4
由于select和options指令的重构,使用ng-if
不再是一个可行的选项,所以你必须转向ng-show="false"
以使其再次工作。