为什么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而没有多重选择，它看起来很奇怪。

当前回答

当你无法控制选项时，使用jQuery的刷任务解决方案

html:

<select id="selector" ng-select="selector" data-ng-init=init() >
...
</select>

js:

$scope.init = function () {
    jQuery('#selector option:first').remove();
    $scope.selector=jQuery('#selector option:first').val();
}

2017-04-05 13:23:50

其他回答

这个解决方案对我来说很有效:

<select ng-model="mymodel">    
   <option ng-value="''" style="display:none;" selected>Country</option>
   <option value="US">USA</option>
</select>

2018-02-26 09:12:06

这对我很有效

<select ng-init="basicProfile.casteId" ng-model="basicProfile.casteId" class="form-control">
     <option value="0">Select Caste....</option>
     <option data-ng-repeat="option in formCastes" value="{{option.id}}">{{option.casteName}}</option>
 </select>

2015-12-15 15:56:49

虽然都是@pkozlowski。opensource和@Mark的答案是正确的，我想分享一下我稍微修改过的版本，我总是选择列表中的第一项，不管它的值是多少:

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

2014-06-11 18:02:11

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

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

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

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

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

2012-09-29 17:26:45

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

2015-02-26 18:58:03

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

推荐文章

最新文章

标签