ng-options如何设置第一个选择始终为空白

Question

我在项目中使用angularjs,我在其中使用ng-options进行生成.

最初当页面重新加载并且没有选择选项元素时,html生成如下:

<select size="3" ng-model="item" ng-options="s.name for s in itemlist">
<option value="?" selected="selected"></option>
<option value="0">Item 1</option>
<option value="1">Item 2</option>
<option value="2">Item 3</option>
</select>

但是当我选择一个元素(例如项目2)时,第一个空白选择消失了.我知道它正在发生,因为ng-model是由选择值设置的.但我希望首先选择始终为空,以便用户可以重置过滤器.

提前致谢.

Answer 1

这将为您完成工作:

<select size="3" ng-model="item" ng-options="s.name for s in itemlist">
    <option value="">Select Option</option>
</select>

Answer 2

对于那些将"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和not ng-hide？因为你想要css选择器将目标定位在上面的第一个选项,选择目标"真实"选项,而不是隐藏的选项.当您使用量角器进行e2e测试时(无论出于何种原因)使用by.css()来定位选择选项,它会变得非常有用.

凯文 - SưuTầm