我在过去几周一直在使用AngularJS,而且真正困扰我的一件事是,即使在尝试了所有排列或规范中定义的配置http://docs.angularjs.org/api/ng.directive: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>
我需要做些什么才能摆脱它?
P.S . :没有这个也可以工作,但如果你使用没有多重选择的select2,它看起来很奇怪 .
25 回答
Angular < 1.4
对于那些将"null"视为其中一个选项的有效值的人(所以想象"null"是下面示例中typeOptions中某个项的值),我发现确保隐藏自动添加选项的最简单方法是使用ng-if .
为什么 ng-if 而不是ng-hide?因为您希望css选择器能够在上面选择第一个选项来选择目标"real"选项,而不是's hidden. It gets useful when you'使用量角器进行e2e测试而且(无论出于何种原因)使用by.css()来定位选择选项 .
Angular >= 1.4
由于select和options指令的重构,使用
ng-if
不再是一个可行的选项,所以你必须转向ng-show="false"
才能使它再次运行 .一个简单的解决方案是使用空值设置一个选项
""
我发现这消除了额外的未定义选项 .这是修复:
对于样本数据,例如:
选择选项应该是这样的: -
关键是当我们将
value.listCount
写为value.listName
时,它会自动填充value.listName
中的文本,但所选选项的值为value.listCount
,尽管值显示正常0,1,2 ..等等!在我的情况下,
financeRef.financeLimit
实际上 grab 了value.listCount
,我可以动态地在控制器中进行操作 .虽然@ pkozlowski.opensource和@Mark的答案都是正确的,但我想分享我稍微修改过的版本,我总是选择列表中的第一个项目,无论其值如何:
我遇到了同样的问题 . 如果您使用普通帖子发布角度表单,那么您将面临此问题,因为angular不允许您以您使用的方式设置选项的值 . 如果你得到"form.type"的值,那么你会找到正确的值 . 你必须自己发布角度对象而不是表格帖子 .
这对我有用
我正在使用Angular 1.4x,我找到了这个例子,所以我使用ng-init在select中设置初始值:
这完全没问题
它的工作方式是,这样可以在选择之前显示第一个选项,并且
display:none
从下拉列表中删除它,如果你想要你可以做的话这会在选择之前给你
select and option
但是一旦选中它就会消失,并且它不会出现在下拉列表中 .当传递给
ng-options
的一组选项中不存在ng-model
引用的值时,将生成空option
. 这可以防止意外的模型选择:AngularJS可以看到初始模型在选项集中未定义或不定义,并且不希望自己决定模型值 .如果你想摆脱空选项只需在控制器中选择一个初始值,例如:
这是jsFiddle:http://jsfiddle.net/MTfRD/3/
简而言之:空选项意味着没有选择有效模型(有效我的意思是:从选项集中) . 您需要选择一个有效的模型值来摆脱这个空选项 .
也许对某人有用:
如果你想使用普通选项而不是ng-options,你可以这样做:
将模型设置为内联 . 使用ng-init摆脱空选项
如果您使用ng-init模型来解决此问题:
简单解决方案
类似的东西也发生在我身上,是由于升级到1.5角 .
ng-init
似乎正在为较新版本的Angular中的类型进行解析 . 在较旧的Angularng-init="myModelName=600"
将映射到值为"600"的选项,即<option value="600">First</option>
但在Angular 1.5中它将找不到它,因为它似乎期望找到值为600的选项,即<option value=600>First</option>
. 然后Angular将随机插入第一项:Angular < 1.2.x
Angular > 1.2
嗨,我有一些jquery移动参考,我删除了它们 . 使用jQuery mobile上述任何修复程序都不适用于我 . (如果有人可以解释jQuery Mobile和Angular JS之间的冲突,那就太棒了)
https://guntucomputerhacks.blogspot.com.au/2017/10/angular-js-drop-down-first-options-vs.html
当您无法控制选项时,使用jQuery的解决方案
HTML:
JS:
我有同样的问题,我(删除“ng-model”)改变了这个:
对此:
现在它的工作,但在我的情况下,它是因为我删除了来自ng.controller的范围,检查你是否没有这样做 .
快速解决方案:
希望它可以帮到某人 . 理想情况下,选择的答案应该是方法,但如果不可能,那么应该作为补丁 .
在控制器中尝试使用相同的顺序:
我想补充一点,如果初始值来自某个父元素或1.5组件的绑定,请确保传递正确的类型 . 如果在绑定中使用
@
,则传递的变量将是字符串,如果选项是例如 . 整数然后空选项将出现 .要么正确解析init中的值,要么使用
<
而不是@
进行绑定(除非必要,否则不建议用于性能) .是当ng-model属性未定义时,ng-model将创建空选项值 . 如果我们将对象分配给ng-model,我们可以避免这种情况
例
角度编码
重要的提示:
将$ scope.collections [0]或$ scope.collections [1]等数组的对象分配给ng-model,不要使用对象属性 . 如果要从服务器获取选择值,使用回调函数,将对象分配给ng-model
来自Angular文档的注释
注意:ngModel按引用进行比较,而不是值 . 绑定到对象数组时这很重要 . 看一个例子http://jsfiddle.net/qWzTb/
我终于尝试了很多次 .
这个解决方案对我有用:
对我来说唯一有用的是在
ng-options
中使用track by
,如下所示:在这里的众多答案中,我想我会重新发布对我有用的解决方案并满足以下条件:
当ng-model是假的时,
提供了一个占位符/提示符(例如"--select region--" w .
value=""
)当ng-model值为假并且用户打开选项下拉列表时,选择占位符(此处提到的其他解决方案使第一个选项显示为选中,这可能会产生误导)
允许用户取消选择有效值,实质上再次选择falsy / default值
code
src
原版q&a - https://stackoverflow.com/a/32880941/1121919
如果你想要一个初始值,请参阅@ pkozlowski.opensource的答案,哪个FYI也可以使用ng-init在视图中(而不是在控制器中)实现:
如果您不想要初始值,“单个硬编码元素(值设置为空字符串)可以嵌套到元素中 . 此元素将表示null或”未选中“选项”:
好吧,实际上答案很简单:当Angular无法识别选项时,它包含一个枯燥的选项 . 你做错了是,当你使用ng-options时,它会读取一个对象,比如
[{ id: 10, name: test }, { id: 11, name: test2 }] right?
这就是你的模型值需要将它评估为相等,比如你想要选择的值为10,你需要将你的模型设置为像
{ id: 10, name: test }
这样的值来选择10,因此它不会创建那个垃圾 .希望它能帮助每个人理解,我有一个艰难的时间尝试:)