Как добавить пользовательскую опцию к выводам ng-options?

Question

Я создал выбор в таблице, которая получает некоторый адрес электронной почты из списка. Вот код:

<td> 
    <select ng-init="selectedEmail = selectedEmail ? selectedEmail : emails[0]" class="form-control" ng-model="selectedEmail" ng-options="item as item.dest for item in emails"></select> 
</td> 

Я бы добавил дополнительную опцию, которая была бы настраиваемой для конечных пользователей. Если я добавить <option> в <select> его перезаписи углового ng-options

<td> 
    <select ng-init="selectedEmail = selectedEmail ? selectedEmail : emails[0]" class="form-control" ng-model="selectedEmail" ng-options="item as item.dest for item in emails"> 
     <option value="custom">Custom</option> 
    </select> 
</td> 

Как я могу добавить пользовательский вариант?

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

Answer 1

Существует несколько способов решения этой проблемы. Если вы хотите продолжить использовать ng-options, вы можете использовать функцию.

HTML

<td> 
    <select 
     ng-init="selectedEmail = selectedEmail ? selectedEmail : emails[0]" 
     class="form-control" 
     ng-model="selectedEmail" 
     ng-options="item as item.dest for item in BuildList()"></select> 
</td> 

<input type="text" placeholder="Enter Custom Option" ng-model="customText" /> 

Функция управления для BuildList

$scope.BuildList = function() { 

    if(!$scope.customText) { 
     return $scope.emails; 
    } 
    var newList = angular.copy($scope.emails); 
    newList.push({someobjectbuildUsingCustom}); 

    return newList ; 
} 

Answer 2

Вы можете использовать этот синтаксис:

<select> 
    <option ng-repeat="(key, value) in emails" value="{{key}}">{{value}}</option> 
    <option ... custom option ...>...</option> 
</select> 

Answer 3

Вы можете сделать согласно ниже:

<div ng-controller="TestController"> 
    {{sel}} 
    <select ng-model="sel" ng-options="d.value as d.label for d in data"> 
    <option value="">any</option> 
    </select> 
</div> 

увидеть это fiddle а