为什么angularjs包括选择一个空的选择 [英] Why does angularjs include an empty option in select

问题描述

我一直在与角的最后几个星期，有一件事是真正困扰我的是，即使尝试所有的排列或<一个在规范中定义的配置后， href=\"http://docs.angularjs.org/api/ng.directive:select\">http://docs.angularjs.org/api/ng.directive:select,我仍然得到一个空的选择，因为选择元素的第一个孩子。

I've been working with angular 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 spec at http://docs.angularjs.org/api/ng.directive:select, I still get an empty option as the first child of select element.

下面的玉

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

Finally, here's the HTML which gets generated

<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?

P.S。事情没有这个工作为好，但如果你使用不SELECT2多个选择，它只是看起来很奇怪。

P.S. Things work without this as well, but it just looks odd if you use select2 without multiple selection.

推荐答案

空生成选项当引用的价值NG-模型不在一组传递给 NG-选项存在。这正好prevent意外型号选择：AngularJS可以看出，最初的模式是在设置选项未定义或不和不希望自行决定模型值

The empty option is generated when a value referenced by ng-model doesn't exist in a set of options passed to ng-options. 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.

如果你想摆脱空选项只需选择在您的控制器的初始值，是这样的：

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;

下面是的jsfiddle： http://jsfiddle.net/MTfRD/3/

Here is the 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.

这篇关于为什么angularjs包括选择一个空的选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！