为什么AngularJS在select中包含一个空的选项？
在过去的几个星期里，我一直在和AngularJS合作，而真正困扰我的是，即使在http://docs.angularjs.org/api/ng尝试了所有的排列或规范中定义的configuration之后， .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没有多个select。
当传递给ng-options一组选项中不存在由ng-model引用的值时，会生成空option 。 这样做可以防止意外的模型select：AngularJS可以看到初始模型在选项集中是未定义的或者不是，并且不想自己决定模型的值。
如果你想摆脱空的select，只需在你的控制器中select一个初始值，如：
$scope.form.type = $scope.typeOptions[0].value;
这里是jsFiddle： http : //jsfiddle.net/MTfRD/3/
简而言之：空选项意味着没有select有效的模型（有效的我的意思是：从选项集合中select）。 您需要select一个有效的模型值来摆脱这个空的选项。
如果你想要一个初始值，请参阅@ pkozlowski.opensource的答案，其中FYI也可以在视图（而不是控制器）中使用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>
如果你不想要一个初始值，“一个单一的硬编码的元素，其值设置为一个空string，可以嵌套到元素中，这个元素将代表null或”未select“选项”：
<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>
angular度<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？ 因为你想在上面select第一个选项的cssselect器select目标“真实”选项，而不是隐藏的选项。 当您使用量angular器进行e2etesting时（以及由于某种原因）您使用by.css（）来定位select选项时，它会很有用。
Angular> = 1.4
由于select和options指令的重构，使用ng-if不再是一个可行的选项，所以你必须转向ng-show="false"来使其重新工作。
也许对某人有用：
如果你想使用简单的选项，而不是ng选项，你可以做如下：
<select ng-model="sortorder" ng-init="sortorder='publish_date'"> <option value="publish_date">Ascending</option> <option value="-publish_date">Descending</option> </select>
在线设置模型。 使用ng-init来摆脱空选项
在这里的众多答案中，我想我会重新发布解决scheme，为我工作，并满足以下所有条件：
- 当ng模型是伪造的时候提供了一个占位符/提示 （例如“–select region–”w
value=""） - 当ng-model值是虚假的 ，用户打开选项下拉列表时，占位符被选中（这里提到的其他解决scheme使第一个选项出现select，这可能会引起误解）
- 允许用户取消select一个有效的值，本质上再次selectfalsy /默认值
码
<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
类似的事情也发生在我身上，是由升级到angular1.5引起的。 ng-init好像是在新版本的Angular中被parsing的types 。 在更老的Angular ng-init="myModelName=600"会映射到值为“600”的选项，即<option value="600">First</option>但是在Angular 1.5中，它不会像这样期待find一个值为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>
快速解决scheme：
select option:empty { display:none }
希望它可以帮助别人。 理想情况下，select的答案应该是方法，但如果不可能的话应该作为补丁。
是的，当ng-model属性未定义时，ng-model会创build空的选项值。 我们可以避免这个，如果我们将对象分配给ng-model
例
angular码编码
$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，不要使用对象属性。 如果您从服务器获取选项值，则使用callback函数将对象赋值给ng-model
从Angular文档注意
注意：ngModel比较引用，而不是值。 绑定到一个对象数组时非常重要。 看一个例子http://jsfiddle.net/qWzTb/
我已经尝试了很多次，终于find了它。
虽然@ pkozlowski.opensource和@ Mark的答案都是正确的，但我想分享一下我稍微修改过的版本，我总是select列表中的第一项，而不pipe它的值如何：
<select ng-options="option.value as option.name for option in typeOptions" ng-init="form.type=typeOptions[0].value"> </select>
我面临同样的问题。 如果您发布的angular度表单与普通的职位，那么你将面临这个问题，作为angular度不允许你设置值的select方式，你已经使用。 如果你得到“form.type”的价值，那么你会find正确的价值。 你必须发表angular度对象，而不是表单post。
一个简单的解决scheme是设置一个空白值的选项""我发现这消除了额外的未定义的选项。
好吧，其实答案是很简单的：当有一个Angular认可的选项时，它包含一个沉闷的选项。 你在做什么错了，当你使用ng-options时，它会读取一个对象，例如[{ id: 10, name: test }, { id: 11, name: test2 }] right?
这就是你的模型值需要被评估为平等的，比如你想要select的值是10，你需要将你的模型设置为一个像{ id: 10, name: test }来select10，因此它会不要创build垃圾。
希望这有助于大家理解，我有一个艰难的时间尝试:)
我使用的是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>
这对我有效
<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>
这工作得很好
<select ng-model="contact.Title" ng-options="co for co in['Mr.','Ms.','Mrs.','Dr.','Prof.']"> <option style="display:none" value=""></option> </select>
它的工作方式是，这使得第一个选项被显示之前select的东西和display:none删除它的forms下拉，所以如果你想你可以做
<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，但一旦选定它将消失，并不会显示在下拉列表中。
在你的控制器中尝试这个，按照相同的顺序：
$scope.typeOptions = [ { name: 'Feature', value: 'feature' }, { name: 'Bug', value: 'bug' }, { name: 'Enhancement', value: 'enhancement' } ]; $scope.form.type = $scope.typeOptions[0];
这是修复：
对于以下示例数据：
financeRef.pageCount = [{listCount:10,listName:modelStrings.COMMON_TEN_PAGE}, {listCount:25,listName:modelStrings.COMMON_TWENTYFIVE_PAGE}, {listCount:50,listName:modelStrings.COMMON_FIFTY_PAGE}];
select选项应该是这样的： –
<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尽pipe值显示正常0,1,2 ..等等！
就我而言， financeRef.financeLimit实际上是抓住了value.listCount ，我可以dynamic地在控制器中进行操作。
我想补充一点，如果初始值来自某个父元素或1.5组件的绑定，请确保传入正确的types。 如果在绑定中使用@ ，传递的variables将是string，如果选项是例如。 整数然后空的选项将出现。
或者正确parsinginit中的值，或者使用<和not @绑定（除非必要，build议不要使用性能）。
解决scheme简单
<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>
jQuery的研磨解决scheme，当你没有select的控制
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(); }
如果你使用ng-init你的模型来解决这个问题：
<select ng-model="foo" ng-app ng-init="foo='2'">
我有同样的问题，我（删除“ng模型”）改变了这一点：
<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删除范围，检查是否你不这样做。
您好，我有一些jQuery的移动参考，我删除它们。 使用jQuery手机上面的任何修复程序都不适合我。 （如果有人可以解释jQuery Mobile和Angular JS之间的冲突，
https://guntucomputerhacks.blogspot.com.au/2017/10/angular-js-drop-down-first-options-vs.html
