过去几周我一直在使用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而没有多重选择,它看起来很奇怪。


当前回答

如果你使用ng-init你的模型来解决这个问题:

<select ng-model="foo" ng-app ng-init="foo='2'">

其他回答

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

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

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

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

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

一个快速的解决方案:

select option:empty { display:none }

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

当ng-model属性未定义时,ng-model将创建空选项值。如果我们将object赋值给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。集合[0]或$scope。集合[1]到ng-model,不使用对象属性。如果你从服务器获取选择选项值,使用回调函数,将对象分配给ng-model

来自Angular文档的说明

注意:ngModel比较的是引用,而不是值。当绑定到对象数组时,这很重要。参见示例http://jsfiddle.net/qWzTb/

我试了很多次终于找到了。

我们可以使用CSS隐藏第一个选项,但它不会工作在IE 10, 11。最好的方法是使用Jquery删除该元素。此解决方案适用于chrome和IE10,11测试的主要浏览器

如果你使用的是angular,有时候使用setTimeout也可以

$scope.RemoveFirstOptionElement = function (element) {
    setTimeout(function () {
        $(element.children()[0]).remove();
    }, 0);
};

当你无法控制选项时,使用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();
}