Why does AngularJS include an empty option in select?
我已经和AngularJS一起工作了几个星期,有一件事让我很困扰,那就是即使在尝试了http://docs.angularJS.org/api/ng.directive:select中定义的所有排列或配置之后,作为select元素的第一个子元素,我仍然会得到一个空选项。
这是玉:
1
select.span9(ng-model='form.type', required, ng-options='option.value as option.name for option in typeOptions');
这里是控制器:
1 2 3 4 5
$scope.typeOptions = [
{ name: 'Feature', value: 'feature' },
{ name: 'Bug', value: 'bug' },
{ name: 'Enhancement', value: 'enhancement' }
];
最后,下面是生成的HTML:
1 2 3 4 5 6
<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-options 的一组选项中不存在ng-model 引用的值时,生成空的option 。这样做是为了防止意外的模型选择:AngularJS可以看到初始模型未定义或不在选项集中,并且不想自己决定模型值。
如果要去掉空选项,只需在控制器中选择一个初始值,如下所示:
1
$scope.form.type = $scope.typeOptions[0].value;
以下是jfiddle:http://jsfidle.net/mtfrd/3/
简而言之:空选项意味着没有选择有效的模型(有效的我的意思是:从选项集)。您需要选择一个有效的模型值来消除这个空选项。
我尝试了$scope.form.type='';和$scope.form.type=$scope.typeoptions[0],但是我仍然使用这个-
抱歉,HTML行太长了,我没有注意到您绑定的是名称,而不是完整的对象。请尝试使用$scope.typeoptions[0].value,如果仍然不起作用,我将发送一个JSfiddle示例。
有时候在JS中使用这些数据真的没有意义。如果是服务器决定了选择的内容,那么为什么JS必须复制它呢?
不幸的是,如果您使用的是数组,并且null 是您的值之一,那么这就不起作用。
您还可以将ng init添加到select标记并在其中设置默认值。
@pkozlowski.opensource如果列表中没有任何内容怎么办?我不应该选择任何东西。在这种情况下,正确的做法是什么?
是否可以在空的 中添加文本,以便tat angular生成类似Select an option</option> 的内容?
@Tareck117只是wirte Select an option</option> ,这是选项列表的空值。不需要?-字符。
但我仍然不明白为什么未定义的模型必须在select的选项列表中生成一个空选项。如果使用默认的-元素,则如果用户没有选择任何内容,并且用户没有混淆,则不会选择选项,为什么会有预选的内容?!如果将大小属性的值设置为5,则可以看到不需要的空选项。
如果您需要$compile select对象,这仍然不起作用。编译后,空白选项返回。如果你找到解决办法,请发到这里。这里的小提琴:jsfiddle.net/gasbcz5z/5
在这种情况下,请记住范围!我花了一些时间与类似的情况作斗争,最后我被设置为不同范围的对象的默认值[ng repeat];
如果在选项元素上添加ng repeat而不是使用ng选项,会怎么样?
@pkozlowski.opensource我还有同样的问题。没什么能帮我解决这个问题。我不知道。它在本地服务器和其他生产站点中工作,但当我将带有相同代码片段的面板上载到新站点时,它不工作。
您好@pkozlowski.opensource谢谢您的回答,请您检查一下我有punker和所有要编辑的数据,还有boundy stackoverflow.com/questions/48355599/&hellip;谢谢…
如果需要初始值,请参见@pkozlowski.opensource的答案,Fyi也可以使用ng init在视图(而不是控制器)中实现:
1 2 3
<select ng-model="form.type" required="required" ng-init="form.type='bug'"
ng-options="option.value as option.name for option in typeOptions">
</select>
如果不需要初始值,"可以将值设置为空字符串的单个硬编码元素嵌套到元素中。然后,此元素将表示空值或"未选择"选项:
1 2 3 4
<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>
@hugo,working fiddle:jsfiddle.net/4qkyx/1注意显示了"选择类型",但没有与之相关的值。一旦你选择了别的东西,你就不会再看到它了。(对铬进行测试。)
这个解决方案最适合我。@然而,在我的应用程序中,opensource解决方案也起作用,这也导致产品在之后没有出现在购物车中。谢谢!
@Markrajcok-非常好的建议!我无意中发现了另一个问题,用你的例子来超越指令。你能看看吗?plnkr.co/edit/efazdeqlnfodihk1r1zc?P=预览
出于某种原因,最后一个示例"选择类型"有效,但不是第一个。我在控制器中以及在视图中初始化它仍然显示空白选项。
只是为了挑一点小妞…如果您使用"value"以外的东西来指定值,例如"val",您应该引用它。否则,你会不断想出一些不好的方法,并安慰那些讨厌的克。:)
问题是您仍然可以使用键盘进行选择,请参阅stackoverflow.com/a/8442831/57344解决方案
这可能暂时有效,但Angular文档特别建议不要在ng repeat之外使用ng init-请参阅docs.angularjs.org/api/ng/directive/ng init
不适用于IE10,"选择类型"始终可见且可选。
我不得不使用-- select choice below --</option> 和null 值,而不是空字符串'' 。其他都没用。干杯。(角1.3)
这个答案中的金块能够通过提供一个选项来控制"空的"选择所说的内容。有时你不想预先选择答案。
第二个很棒。我不想去选择,因为它让使用复杂的过滤器很烦人。第二个选项只适用于选定的默认值
第二个是很好的解决方案:)
@Markrajcok你好,请检查这个问题是否有赏金too stackoverflow.com/questions/48355599/&hellip;
角度<1.4
对于那些将"null"视为某个选项的有效值的人(假设"null"是下面示例中typeoptions中某个项的值),我发现确保隐藏自动添加选项的最简单方法是使用ng if。
1 2 3
<select ng-options="option.value as option.name for option in typeOptions">
<option value="" ng-if="false"></option>
</select>
为什么不藏起来?因为您希望在上面的select中以第一个选项为目标的css选择器以"real"选项为目标,而不是隐藏的选项。当您使用量角器进行E2E测试时,以及(出于任何原因)使用.css()以选择选项为目标时,它会变得很有用。
角>1.4
由于select和options指令的重构,使用ng-if 不再是一个可行的选项,因此您必须转向ng-show="false" 以使其再次工作。
应该是可接受的答案,因为这是选择的正确视觉行为。您将size="5" 放到selects属性中,可以看到没有选择任何内容!就像默认的 元素一样!我不明白为什么Angular在没有multiple 属性的情况下为selects做这样的事情…
是的,我同意,这应该是公认的答案。这是"角度方式"。ng如果实际上从dom中删除了options元素(如果为false),那么这个解决方案也可以在所有浏览器上运行,而不需要"hacky"编码(与ng hide或ng show相反)。
@Sander_p根据定义,我认为这个解决方案是"黑客"编码(在DOM中放置一些东西以欺骗Angular将其取出),但您是对的,它仍然是"最佳"解决方案。"更好的"解决方案是允许一个没有价值的friggin select!搞什么鬼?这并不是一个边缘场景。
@Dudewad:角度1.4可能会更好。从AngularJS 1.4.0的博客中:"NgoOptions被完全重构,以允许修复一些恼人的错误。"
哈哈"讨厌的虫子"。可以。好吧,在交货前3天升级的时候,我还是一个小问题,所以现在我会和你的解决方案保持一致,它看起来工作得很顺利。不过,以未来著称:谢谢!
这对我有好处。谢谢!!!!但我用了不同的方式,我需要处理的对象是如此挑衅地要求ng重复。 {{Id.name}}</option > </option> </select> </label>
不再在AngularJS工作>=1.6.5
可能对某人有用:
如果要使用纯选项而不是ng选项,可以执行以下操作:
1 2 3 4
<select ng-model="sortorder" ng-init="sortorder='publish_date'">
<option value="publish_date">Ascending</option>
<option value="-publish_date">Descending</option>
</select>
以内联方式设置模型。使用ng init除去空选项
我找不到一个明确的例子,用对象而不是JSON数组来设置ng选项,当我试图在这两者之间"转换"时,它不仅不能正确出现,而且"无声地"失败,所以我不知道我做错了什么。我最终选择了在选项标签中使用普通的ng repeat。我知道这不是最好的做法,但至少能奏效。如果有人能给我指出一个简单、易于交换的细节,使用NG选项和数据对象(而不是JSON)的Angular-N00B-Friendly工作示例,我会很高兴的。如果它也使用ng init,则会加倍高兴。
我使用的是普通选项,但在控制器中,我似乎没有得到所选下拉列表的值。我尝试了alert($scope.sortorder.value);和alert($scope.sortorder);两者都给出了未定义的。如何在此处获取所选值?
非常感谢。我正要在控制器中编写一个完全无用的对象,我不需要它,只需要一个简单的选择。再次感谢。
类似的事情发生到我是太村是诱发和升级到安角1.5.ng-init 表明是被用在parsed型角部newer版本。老年ng-init="myModelName=600" 角会进入到西安地图选项和值"600"即First 1.5到角,但它不会去为它表明这是个选择to find期待什么期望与价值600 i.e First 。然后插入角会随机的第一项:(一) </P >
1
<option value="? number:600 ?"></option>
< 1.2.x角 </P >
1 2 3 4
<select ng-model="myModelName" ng-init="myModelName=600">
<option value="600">First</option>
<option value="700">Second</option>
</select>
角大于1.2 </P >
1 2 3 4
<select ng-model="myModelName" ng-init="myModelName='600'">
<option value="600">First</option>
<option value="700">Second</option>
</select>
谢谢!在我的例子中,我不能使用ng in i t(没有默认值),所以我将我的模型强制转换为一个字符串,它起作用了!
这个问题的最佳答案…
对我的应用程序生产问题非常有用。谢谢@nabil boag
当然,这是可行的,但更好的选择是在option 中使用ng-value="600" ,而不是在value 中使用。它将把它解析为一个数字,您不必像现在这样转换您的值:)
在《multitudes(答案在这里,在压花的溶液是转贴的挤压方法,我和所有的满足以下条件: </P >
提供一placeholder /提示当"ng模型冰falsy(例如"-选择区域"W。value="" )
当CT值falsy冰模型和用户打开"选项的下拉菜单中,选择"placeholder冰(其他的解决方案,我的丈夫第一选项的选择,这可以让appear misleading)
允许用户对deselect的一个有效值,基本上选择"falsy /默认值了
</P >
代码 </P >
1 2 3 4 5
<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 </P >
原创Q &;A stackoverflow.com https:/ / / / / 1121919 32880941 </P >
如果值为空,则不起作用
你是说如果违约是 ?
我的意思是,如果ng模型值设置为空,则选择上的angular creates和empty选项
快速解决方案:(一) </P >
1
select option:empty { display:none }
helps希望它的人。ideally,答案应该选的方法,但如果万一那是不可能的,那么应该工作作为一个补丁。 </P >
根据我的测试,这只能在Chrome(最新的Chrome)和Firefox中使用。IE和Safari休息。不了解Opera和其他边缘浏览器。不管怎样,不幸的是,这不是一个好的解决方案。
我们应该把它放在HTML中的哪个位置,然后关闭或JS中的其他位置
@这是一个CSS规则。将其放入样式表或