AngularJS - проблема с выпадающим меню в теге <select>, не может иметь 2 пользовательских опции при использовании ng-option

Question

У меня есть <select>, который зацикливается на массиве данных и отображает варианты выбора, доступные в раскрывающемся списке.

разметка выглядит так:

 <select required class="form-control btn-primary btn dropdown-toggle"
    ng-options="s.name for s in list track by s.name" ng-model="list">
    <option selected value=""></option>
    <option value="" ng-click="">Split</option>
</select>

Что я хочуто есть, чтобы иметь предварительно выбранное значение в виде пустой строки, я добился этого с помощью:

<option selected value=""></option> 

, но затем мне нужен второй настраиваемый тег <option> помимо всех тегов <option>, которые генерируются ng-option,

в этом теге мне нужно показать строку, в данном случае «split», и на этом option будет щелкнуть ng, чтобы пользователь мог щелкнуть по нему и второе раскрывающееся менюбудет появляться.

Проблема в том, что второй тег <option> не отображается, только первый, и я провел несколько тестов, и, по-видимому, я могу показать только один тег параметра, кроме тегов из ng-option.

Есть ли решение для этого?

В качестве конечного результата мне нужен мой option список, сгенерированный ng-option, затем предварительно выбранный option, который является ПУСТОЙ (он отображается при загрузке пользователемстраницы) и второй option с пользовательской строкой, которая будет использоваться как кнопка.

Здесь jsfiddle, где вы можете видеть, что второй тег пользовательской опции не отображается

https://jsfiddle.net/0xyt24sh/10/

спасибо

Answer 1

Невозможно иметь более одной жестко запрограммированной опции с ngOptions , как явно указано в документации:

Опционально, один жестко запрограммированный элемент сзначение, установленное в пустую строку, может быть вложено в элемент.Этот элемент будет тогда представлять нулевой или «не выбранный» параметр.

Обходной путь может заключаться в использовании 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:

При желании в элемент может быть вложен один жестко закодированный элемент со значением, установленным в пустую строку.Этот элемент будет представлять нулевую или не выбранную опцию.См. Пример ниже для демонстрации.

В этом случае ngOptions не подходит для вашей проблемы;Вместо этого вы можете использовать <option> s с 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>   

Рабочий JSFiddle здесь