为什么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"以使其再次工作。

链接地址: http://www.djcxy.com/p/36383.html

上一篇: Why does AngularJS include an empty option in select?

下一篇: line macro: do/while(0) vs scope block