Question

我有一个＆lt; select＆gt;循环遍历数据数组并显示下拉列表中可用的选项。标记是这样的：＆lt; select required class =“form-control btn-primary btn dropdown-toggle” ng-options = s.name中列表轨道中s的“s.name”ng-model =“list”＆gt; ＆lt; option selected value =“”＆gt;＆lt; / option＆gt; ＆lt; option value =“”ng-click =“”＆gt;拆分＆lt; /选项＆gt; ＆LT; /选择＆GT; 我想要的是，要将预选值作为空字符串，我通过以下方式实现：＆lt; option selected value =“”＆gt;＆lt; / option＆gt; 但后来我需要第二个自定义＆lt;选项＆gt;标签除了所有＆lt;选项＆gt;由ng-option生成的标记，在这个标签中我需要显示一个字符串，在这种情况下是“拆分”，并且会有一个ng-click这个选项，这样用户就可以点击它，然后会出现第二个下拉列表。问题是第二个＆lt;选项＆gt;标记它没有显示，只有第一个，我做了一些测试，显然除了ng-option之外我只能显示一个选项标签。这有解决方案吗？我需要的最终结果是我的选项列表由ng-option生成，然后是一个预先选择的选项，它是EMPTY（它在用户加载页面时显示），第二个选项包含一个自定义字符串，用作按钮。这里有一个jsfiddle，你可以看到第二个自定义选项标签没有显示 https://jsfiddle.net/0xyt24sh/10/ 谢谢

Answer 1

如文档中明确提到的那样，ngOptions无法使用多个硬编码选项：

可选地，单个硬编码元素，设置值到一个空字符串，可以嵌套到元素中。这个然后，element将表示null或＆＃34;未选择＆＃34;选项。

解决方法可能是使用ngRepeat：

<select class="form-control btn-primary btn dropdown-toggle" ng-model="selection">
    <option value="" selected></option>
    <option ng-repeat="s in list">{{s.name}}</option>
    <option ng-click="" value="split">Split</option>
</select>

更新了小提琴：https://jsfiddle.net/0xyt24sh/17/

Answer 2

来自ngOptions documentation:

可选地，单个硬编码元素（其值设置为空字符串）可以嵌套到元素中。然后，此元素将表示null或＆＃34;未选择＆＃34;选项。请参阅下面的示例进行演示。

在这种情况下，ngOptions并不适合您的问题;相反，您可以将<option>与ng-repeat一起使用，例如：

<select required class="form-control btn-primary btn dropdown-toggle" ng-model="selected">
   <option selected value=""></option> 

   <option ng-repeat="item in list track by item.code">
     {{item.name}}
   </option>

   <option value="split" ng-click="doSomething()">Split</option>       
 </select>

Working JSFiddle here

AngularJS - <select>标签中的下拉菜单问题，使用ng-option时不能有2个自定义选项

2 个答案: