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

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>

我需要做些什么才能摆脱它？

PS:事情也没有这个,但如果你使用select2而没有多重选择,它看起来很奇怪.

Answer 1

option当ng-model传入的一组选项中不存在引用的值时,将生成空ng-options.这可以防止意外的模型选择:AngularJS可以看到初始模型在选项集中未定义或不定义,并且不希望自己决定模型值.

如果你想摆脱空选项只需在控制器中选择一个初始值,例如:

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

这是jsFiddle:http://jsfiddle.net/MTfRD/3/

简而言之:空选项意味着没有选择有效模型(有效我的意思是:从选项集中).您需要选择一个有效的模型值来摆脱这个空选项.

Answer 2

如果你想要一个初始值,请参阅@ 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>

Answer 3

角度<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和not ng-hide？因为你想要css选择器将目标定位在上面的第一个选项,选择目标"真实"选项,而不是隐藏的选项.当您使用量角器进行e2e测试时(无论出于何种原因)使用by.css()来定位选择选项,它会变得非常有用.

角度> = 1.4

由于select和options指令的重构,使用ng-if不再是一个可行的选项,所以你必须转向ng-show="false"使它再次工作.

Answer 4

也许对某人有用:

如果你想使用普通选项而不是ng-options,你可以这样做:

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

将模型设置为内联.使用ng-init摆脱空选项

Answer 5

类似的东西也发生在我身上,是由于升级到1.5角.ng-init似乎是在较新版本的Angular中进行类型解析.在较旧的Angular ng-init="myModelName=600"中将映射到值为"600"的选项,即<option value="600">First</option>但在Angular 1.5中它将找不到它,因为它似乎期望找到值为600的选项,即<option value=600>First</option>.然后Angular将随机插入第一个项目:

<option value="? number:600 ?"></option>

角度<1.2.x

<select ng-model="myModelName" ng-init="myModelName=600">
  <option value="600">First</option>
  <option value="700">Second</option>
</select>

角度> 1.2

<select ng-model="myModelName" ng-init="myModelName='600'">
  <option value="600">First</option>
  <option value="700">Second</option>
</select>

Answer 6

在这里的众多答案中,我想我会重新发布适合我的解决方案,并满足以下所有条件:

• 当ng模型是假的时候提供占位符/提示(例如"--select region--"w.)value=""
• 当ng-model值为假,用户打开选项下拉列表时,会选择占位符(此处提到的其他解决方案会使第一个选项显示为选中,这可能会产生误导)
• 允许用户取消选择有效值,实质上再次选择falsy/default值

码

<select name="market_vertical" ng-model="vc.viewData.market_vertical"
    ng-options="opt as (opt | capitalizeFirst) for opt in vc.adminData.regions">

    <option ng-selected="true" value="">select a market vertical</option>
</select>

SRC

原始q&a - /sf/answers/2301665901/

Answer 7

快速解决方案:

select option:empty { display:none }

希望它可以帮助某人.理想情况下,选择的答案应该是方法,但如果不可能,那么应该作为补丁.

Answer 8

是当ng-model属性未定义时,ng-model将创建空选项值.如果我们将对象分配给ng-model,我们可以避免这种情况

例

角度编码

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

$scope.selectedOption = $scope.collections[0];


<select class='form-control' data-ng-model='selectedOption' data-ng-options='item as item.name for item in collections'></select>

重要的提示:

将$ scope.collections [0]或$ scope.collections [1]等数组的对象分配给ng-model,不要使用对象属性.如果从服务器获取选择值,使用回调函数,将对象分配给ng-model

来自Angular文档的注释

注意:ngModel按引用进行比较,而不是值.绑定到对象数组时这很重要.看一个例子http://jsfiddle.net/qWzTb/

我已经尝试了很多次,终于找到了它.

Answer 9

虽然@ pkozlowski.opensource和@Mark的答案都是正确的,但我想分享我稍微修改过的版本,我总是选择列表中的第一个项目,无论其值如何:

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