为什么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>

我需要做什么才能摆脱它?

附注:没有这个也可以工作，但是如果使用select2而没有多重选择，它看起来很奇怪。

当前回答

一个简单的解决方案是设置一个空值的选项“”我发现这消除了额外的未定义选项。

2015-02-26 18:58:03

其他回答

参考angularjs文档中的例子如何克服这些问题。

点击这里的文档链接查找“通过ngModel解析/格式化将select绑定到非字符串值” 你可以看到，指令convertToNumber解决了这个问题。

这对我很管用。也可以看到它是如何工作在这里

2019-03-22 07:41:36

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

如果你想去掉空选项，只需要在你的控制器中选择一个初始值，比如:

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

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

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

2012-09-29 17:26:45

也许对某人有用:

如果你想使用普通选项而不是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清除空选项

2013-08-28 13:32:54

类似的事情也发生在我身上，这是由升级到angular 1.5引起的。ng-init似乎在Angular的新版本中被解析为类型。在旧的Angular中，ng-init="myModelName=600"会映射到一个值为"600"的选项，即<option value="600"，但在Angular 1.5中，它不会发现这个，因为它似乎期望找到一个值为600的选项，即<option value=600 First</option>。然后Angular会插入一个随机的第一项:

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

Angular < 1.2.x

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

Angular > 1.2

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

2016-03-17 14:47:01

如果需要初始值，请参阅@pkozlowski。开源的答案，供你参考，它也可以在视图中(而不是在控制器中)使用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>

2012-12-10 21:09:14

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

推荐文章

最新文章

标签