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

当前回答

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

<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

其他回答

当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/

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

2014-07-16 16:47:47

我想补充一点，如果初始值来自某个父元素或1.5组件的绑定，请确保传递了正确的类型。如果在绑定中使用@，传递的变量将是string，如果选项为eg。整数，则会显示空选项。

正确解析init中的值，或者使用<而不是@绑定(为了提高性能，除非必要，建议少使用)。

2016-12-20 16:49:51

我使用的是Angular 1.4x，我找到了这个例子，所以我用ng-init在select中设置初始值:

<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.id for item in items"></select>

2017-05-18 18:14:29

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

2015-02-26 18:58:03

唯一对我有用的是在ng-options中使用track by，就像这样:

 <select class="dropdown" ng-model="selectedUserTable" ng-options="option.Id as option.Name for option in userTables track by option.Id">

2017-11-19 19:30:51

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

推荐文章

最新文章

标签