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

当ng-model引用的值在传递给ng-options一组选项中不存在时，将生成empty option 。 这样做是为了防止意外选择模型：AngularJS可以看到初始模型是未定义的还是未在选项集中，并且不想自己决定模型的值。

如果要摆脱空选项，只需在控制器中选择一个初始值，例如：

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

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

简而言之：空选项意味着没有选择有效的模型（有效的意思是：从选项集中）。 您需要选择一个有效的模型值来摆脱此空选项。

Answer 2

如果需要初始值，请参见@ pkozlowski.opensource的答案，也可以使用ng-init在视图中（而不是在控制器中）实现该FYI：

<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而不是ng-hide？ 因为您希望将上面的第一个选项作为目标的css选择器选择为“真实”选项，而不是隐藏的选项。 当您使用量角器进行端到端测试并且（无论出于何种原因）使用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-model 虚假时提供了一个占位符/提示 （例如“ --select region--” w。value value="" ）
• 当ng-model值错误且用户打开选项下拉列表时，将选择占位符（此处提到的其他解决方案会使第一个选项显示为选中状态，这可能会引起误解）
• 允许用户取消选择有效值，本质上再次选择伪造的 /默认值

码

<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

原始问答-https: //stackoverflow.com/a/32880941/1121919

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>

Answer 10

我遇到了同样的问题。 如果您要发布带有正常发布的角度表格，那么您将面临此问题，因为角度不允许您以已使用的方式设置选项的值。 如果获得“ form.type”的值，则将找到正确的值。 您必须将角度对象本身过帐而不是表格过帐。

Answer 11

一个简单的解决方案是将一个选项设置为空白值""我发现这消除了多余的未定义选项。

Answer 12

好的，答案很简单：当有一个Angular无法识别的选项时，它就包含了一个沉闷的选项。 您做错了什么，当您使用ng-options时，它读取一个对象，说[{ id: 10, name: test }, { id: 11, name: test2 }] right?

这就是您的模型值需要等于它的值，例如，要选择的值为10，需要将模型设置为{ id: 10, name: test }以选择10，因此它将不要创建该垃圾。

希望它能帮助大家理解，我在尝试时花了很多时间:)

Answer 13

我使用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>

Answer 14

这对我有用

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

Answer 15

这工作得很好

<select ng-model="contact.Title" ng-options="co for co in['Mr.','Ms.','Mrs.','Dr.','Prof.']">
    <option style="display:none" value=""></option>
</select>

它的工作方式是，在选择某物之前，它给出了要显示的第一个选项，并且display:none从下拉列表中将其删除，因此如果您愿意，可以

<select ng-model="contact.Title" ng-options="co for co in['Mr.','Ms.','Mrs.','Dr.','Prof.']">
    <option style="display:none" value="">select an option...</option>
</select>

并且会在select and option之前为您提供select and option ，但是一旦选择，它将消失，并且不会显示在下拉菜单中。

Answer 16

此解决方案适用于我：

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

Answer 17

按照相同的顺序在您的控制器中尝试以下操作：

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

Answer 18

解决方法是：

对于像这样的样本数据：

financeRef.pageCount = [{listCount:10,listName:modelStrings.COMMON_TEN_PAGE},    
{listCount:25,listName:modelStrings.COMMON_TWENTYFIVE_PAGE},
{listCount:50,listName:modelStrings.COMMON_FIFTY_PAGE}];

选择选项应如下所示：

<select ng-model="financeRef.financeLimit" ng-change="financeRef.updateRecords(1)" 
class="perPageCount" ng-show="financeRef.showTable" ng-init="financeRef.financeLimit=10"
ng-options="value.listCount as value.listName for  value in financeRef.pageCount"
></select>

关键是当我们将value.listCount写为value.listName ，它会自动填充value.listName的文本，但所选选项的值是value.listCount尽管这些值可以正常显示0、1、2等。 !!!

就我而言， financeRef.financeLimit实际上是在获取value.listCount ，我可以在控制器中动态地进行操作。

Answer 19

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

要么正确解析init的值，要么用<而不是@绑定（除非有必要，否则建议不@ ）。

Answer 20

简单的解决方案

<select ng-model='form.type' required><options>
<option ng-repeat="tp in typeOptions" ng-selected="    
{{form.type==tp.value?true:false}}" value="{{tp.value}}">{{tp.name}}</option>

Answer 21

当您无法控制选项时，可以使用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();
}

Answer 22

如果您使用ng-init模型来解决此问题：

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

Answer 23

我有同样的问题，我（已删除“ ng-model”）更改为：

<select ng-model="mapayear" id="mapayear" name="mapayear" style="  display:inline-block !important;  max-width: 20%;" class="form-control">
  <option id="removable" hidden> Selecione u </option>
    <option selected ng-repeat="x in anos" value="{{ x.ano }}">{{ x.ano }}
</option>
</select>

对此：

<select id="mapayear" name="mapayear" style="  display:inline-block !important;  max-width: 20%;" class="form-control">
  <option id="removable" hidden> Selecione u </option>
    <option selected ng-repeat="x in anos" value="{{ x.ano }}">{{ x.ano }}
</option>
</select>

现在它可以正常工作了，但是在我的情况下，这是我从ng.controller删除了该范围，请检查您是否没有这样做。

Answer 24

嗨，我有一些jQUery移动参考，并删除了它们。 使用jQuery mobile时，以上任何修复方法均不适用于我。 （如果有人可以解释jQuery Mobile和Angular JS之间的冲突，那就太好了）

https://guntucomputerhacks.blogspot.com.au/2017/10/angular-js-drop-down-first-options-vs.html

Answer 25

对我唯一有效的方法是在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">

Answer 26

请参阅angularjs文档中的示例，以解决这些问题。

1. 在此处转到此文档链接
2. 查找' 通过ngModel解析/格式化将选择绑定到非字符串值 '
3. 在那可以看到，名为“ convertToNumber ”的指令解决了该问题。

这个对我有用。 在这里也可以看到它的工作原理

Answer 27

我们可以使用CSS隐藏第一个选项，但是在IE 10、11中将无法使用。最好的方法是使用Jquery删除元素。 该解决方案适用于在chrome和IE10中测试过的主要浏览器，11

另外，如果您使用angular，则有时使用setTimeout可以正常工作

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