如何为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>

我会添加一个额外的选项，作为最终用户的自定义选项。 如果我在<select>添加<option> ，它将被Angular 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

您可以按以下方式执行：

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

看到这个小提琴

Answer 2

有几种方法可以解决这个问题。 如果要继续使用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 3

您可以使用以下语法：

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