提问



我过去几周一直在使用AngularJS,而且真正困扰我的一件事是,即使在尝试了所有排列或http://docs.angularjs.org/api/ng规范中定义的配置之后.directive:select,我仍然得到一个空选项作为select元素的第一个子元素。[57]


这是玉的:


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>


我需要做些什么才能摆脱它?


P.S。:没有这个也可以工作,但是如果你使用没有多重选择的select2,它看起来很奇怪。

最佳参考


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


如果你想摆脱空选项只需在控制器中选择一个初始值,例如:


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


这是jsFiddle:http://jsfiddle.net/MTfRD/3/[58]


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

其它参考1


如果你想要一个初始值,请参阅@ 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>


如果您不想要初始值,则可以将单个硬编码元素(其值设置为空字符串)嵌套到元素中。然后,此元素将表示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>

其它参考2


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?因为你想要css选择器以上面的第一个选项为目标选择目标真实选项,而不是那个隐藏的选项。当你使用量角器进行e2e测试和(无论出于何种原因)你使用它时,它会变得有用。 css()定位选择选项。


Angular>=1.4


由于select和options指令的重构,使用ng-if不再是一个可行的选项,所以你必须转向ng-show="false"以使其再次工作。

其它参考3


也许对某人有用:


如果你想使用普通选项而不是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摆脱空选项

其它参考4


在这里的众多答案中,我想我会重新发布对我有用的解决方案并满足以下条件的所有:



  • 在ng-model为 falsy 时提供占位符/提示(例如--select region--w。value="")

  • 当ng-model值为 falsy 并且用户打开选项下拉列表时,会选择占位符(此处提到的其他解决方案会使第一个选项显示为选中,这可能会产生误导)

  • 允许用户取消选择有效值,实质上再次选择 falsy /默认值



[59]





<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


原版q& a - https://stackoverflow.com/a/32880941/1121919

其它参考5


类似的事情也发生在我身上,并且是由于升级到1.5的角度引起的。ng-init似乎是在较新版本的Angular中解析 type 。在较旧的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>


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>

其它参考6


快速解决方案:


select option:empty { display:none }


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

其它参考7


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

其它参考8

或$ scope.collections
select.span9(ng-model='form.type', required, ng-options='option.value as option.name for option in typeOptions');
等数组的对象分配给ng-model,不要使用对象属性。如果要从服务器获取选择值,使用回调函数,将对象分配给ng-model


来自Angular文档的注释


注意:ngModel按引用进行比较,而不是值。绑定到对象数组时这很重要。看一个例子http://jsfiddle.net/qWzTb/[61]


我终于尝试了很多次。

其它参考9


虽然@ pkozlowski.opensource的s和@Mark的答案都是正确的,但我想分享我稍微修改过的版本,我总是选择列表中的第一个项目,无论其值如何:


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

其它参考10




我遇到了同样的问题。如果你发布一个普通帖子的角形表格,那么你将面临这个问题,因为角度不允许你以你使用的方式设置选项的值。如果你得到form.type的值,那么你会找到正确的价值。你必须自己发布角度对象而不是表格帖子。

其它参考11


好吧,实际上答案很简单:当Angular无法识别选项时,它包含一个枯燥的选项。
你做错了是,当你使用ng-options时,它会读取一个对象,比如说[{ id: 10, name: test }, { id: 11, name: test2 }] right?


这就是你的模型值需要将它评估为相等,比如你想要选择的值为10,你需要将模型设置为{ id: 10, name: test }之类的值来选择10,因此它不会创建垃圾。


希望它能帮助每个人理解,我有一个艰难的时间尝试:)

其它参考12


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

其它参考13


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

其它参考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>

其它参考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但是一旦被选中它就会消失,并且它不会出现在下拉列表中。

其它参考16


在控制器中尝试使用相同的顺序:


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

其它参考17


这是修复:


对于样本数据,例如:


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,我可以动态地在控制器中进行操作。

其它参考18


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


要么正确解析init中的值,要么用<而不是@进行绑定(除非必要,否则不建议用于性能)。

其它参考19


简单解决方案


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




其它参考20


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

其它参考21


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


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

其它参考22


我有同样的问题,
我(删除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删除该范围,检查你是否做不同。

其它参考23


嗨,我有一些jquery移动参考,我删除了它们。使用jQuery mobile上述任何修复程序都不适用于我。 (如果有人可以解释jQuery Mobile和Angular JS之间的冲突,那就太棒了)


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

其它参考24


对我来说唯一有用的是在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">




其它参考25


这个解决方案对我有用:


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