2015-09-03 47 views
-1

这是用于在下拉菜单中显示“选择一个选项”的代码(选择)。为什么display:none在选择角度js中的“Select a option”?

<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 option</option> 
</select> 

任何人都可以解释我在这段代码背后发生了什么以及显示的用途是什么:none?

回答

1

的NG-Options指令就像是中继器,它会生成选项和它会将它们放在具有显示的那个之后:没有最初选择的那个。检查文档以获取更多信息。

当select选项展开时隐藏display:none选项的想法,以便最终生成有效的选择。

+0

你什么意思是“当选择扩大”?为什么它第一次显示? –

+0

当你点击选择一个带有选项的列表出现时,它处于“扩展”状态 – vbuhlev

+0

为什么它第一次显示??? –

0

With style="display:none"您无法从下拉列表中选择'选择一个选项'。除此之外,您的选择将是选项option.value的值,但文本也可以选择as option.name选项的名称,每个选项来自typeOptions。

我发现this fiddle,试图删除样式=“显示:无”,看看有什么happends,还尝试删除整个<option style="display:none" value="">select a option</option>线

+0

为什么它第一次显示它的风格是“显示:无” –

+0

你可以删除整行我想如果你不想显示,你可以说它只是作为一个提示。在我的答案描述它很不错(选择是有效的) – klskl

0

Angular select指令会执行此操作,这是因为存在褶皱以及选择控件在浏览器中的工作原理。如果选择控件最初的值为“X”,但没有值为“X”的选项元素,浏览器将自动从列表中选择第一个选项;用户实际上没有这样做。这是非常无益的,因为它会产生Angular会侦测到的虚假变化,并且打败“必需”设置的可能意图,这就是要求人类(而不是浏览器自动)做出选择。

在上例中,该值为空字符串“”,但适用相同的想法。

在手工编程浏览器DOM的“糟糕的旧时代”,这也是出于同样的原因所必需的。

相关问题