为什么AngularJS在select中包含一个空选项？

本文翻译自：Why does AngularJS include an empty option in select?

I've been working with AngularJS for the last few weeks, and the one thing which is really bothering me is that even after trying all permutations or the configuration defined in the specification at http://docs.angularjs.org/api/ng.directive:select , I still get an empty option as the first child of select element. 在过去的几周里，我一直在使用AngularJS，而令我困扰的一件事是，即使尝试了所有置换或http://docs.angularjs.org/api/ng规范中定义的配置， .directive：select ，我仍然得到一个空选项作为select元素的第一个子元素。

Here's the Jade: 这是玉：

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

Here the controller: 这里的控制器：

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

Finally, here's the HTML which gets generated: 最后，这是生成的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>

What do I need to do to get rid of it? 我需要怎么做才能摆脱它？

PS: Things work without this as well, but it just looks odd if you use select2 without multiple selection. PS：事情也不需要这样做，但是如果您使用select2而不进行多重选择，那看起来就很奇怪。

---

#1楼

参考：https://stackoom.com/question/r62x/为什么AngularJS在select中包含一个空选项

---

#2楼

The empty option is generated when a value referenced by ng-model doesn't exist in a set of options passed to ng-options . 当ng-model引用的值在传递给ng-options一组选项中不存在时，将生成empty option 。 This happens to prevent accidental model selection: AngularJS can see that the initial model is either undefined or not in the set of options and don't want to decide model value on its own. 这样做是为了防止意外选择模型：AngularJS可以看到初始模型是未定义的还是未在选项集中，并且不想自己决定模型的值。

If you want to get rid of the empty option just select an initial value in your controller, something like: 如果要摆脱空选项，只需在控制器中选择一个初始值，例如：

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

Here is the jsFiddle: http://jsfiddle.net/MTfRD/3/ 这是jsFiddle： http : //jsfiddle.net/MTfRD/3/

In short: the empty option means that no valid model is selected (by valid I mean: from the set of options). 简而言之：空选项意味着没有选择有效的模型（有效的意思是：从选项集中）。 You need to select a valid model value to get rid of this empty option. 您需要选择一个有效的模型值来摆脱此空选项。

---

#3楼

If you want an initial value, see @pkozlowski.opensource's answer, which FYI can also be implemented in the view (rather than in the controller) using ng-init: 如果需要初始值，请参见@ pkozlowski.opensource的答案，也可以使用ng-init在视图中（而不是在控制器中）实现该FYI：

<select ng-model="form.type" required="required" ng-init="form.type='bug'"
  ng-options="option.value as option.name for option in typeOptions" >
</select>

If you don't want an initial value, "a single hard-coded element, with the value set to an empty string, can be nested into the element. This element will then represent null or "not selected" option": 如果您不希望使用初始值，则“可以将单个硬编码元素（其值设置为空字符串）嵌套到该元素中。该元素将代表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>

---

#4楼

I faced the same issue. 我遇到了同样的问题。 If you are posting an angular form with normal post then you will face this issue, as angular don't allow you to set values for the options in the way you have used. 如果您要发布带有正常发布的角度表格，那么您将面临此问题，因为角度不允许您以已使用的方式设置选项的值。 If you get the value of "form.type" then you will find the right value. 如果获得“ form.type”的值，则将找到正确的值。 You have to post the angular object it self not the form post. 您必须将角度对象本身过帐而不是表格过帐。

---

#5楼

Maybe useful for someone: 可能对某人有用：

If you want to use plain options instead of ng-options, you could do like below: 如果要使用普通选项而不是ng-options，可以执行以下操作：

<select ng-model="sortorder" ng-init="sortorder='publish_date'">
  <option value="publish_date">Ascending</option>
  <option value="-publish_date">Descending</option>
</select>

Set the model inline. 内联设置模型。 Use ng-init to get rid of empty option 使用ng-init摆脱空选项

---

#6楼

Though both @pkozlowski.opensource's and @Mark's answers are correct, I'd like to share my slightly modified version where I always select the first item in the list, regardless of its value: 尽管@ pkozlowski.opensource和@Mark的答案都是正确的，但我还是想分享一下我的略作修改的版本，无论该值如何，我总是在列表中选择第一项：

<select ng-options="option.value as option.name for option in typeOptions" ng-init="form.type=typeOptions[0].value">
</select>