如何將自定義選項添加到ng選項輸出？

Question

我在一個表中創建了一個select，從列表中獲取一些電子郵件地址。這裏是代碼：

<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> 

我會添加一個額外的選項，將爲最終用戶的自定義選項。如果我中<select>添加<option>它是由角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以及