为什么AngularJS包括一个空选项中选择？

Question

在过去的几周里，我一直在与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而不使用多个选项，那看起来很奇怪。

Answer 1

有棱角的

对于任何将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如果而不是ng隐藏？因为您希望css选择器以上面的第一个选项为目标，选择以“真实”选项为目标，而不是隐藏的选项。当您使用量角器进行e2e测试以及（出于任何原因）使用by.css（）以选择选项为目标时，它非常有用。

有棱角的

由于select和options指令的重构，如果不再可行，则使用ng，因此您必须转到ng show=“false”，使其再次工作。

Answer 2

如果需要初始值，请参阅@pkozlowski.opensource的答案，供参考，该答案也可以使用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>

Answer 3

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

如果要取消空选项，只需在控制器中选择一个初始值，如：

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

以下是JSFIDLE：http://jsfiddle.net/MTfRD/3/

简而言之：空选项意味着没有选择有效的模型（我的意思是：从选项集中）。您需要选择一个有效的模型值来删除此空选项。