如何将自定义选项添加到 ng-options 输出?

How to add custom option to ng-options output?

我在 table 中创建了一个 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> 它会被 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>

如何添加自定义选项?

我的目的是为用户添加一个 "custom" 选择:如果他们 select 该选项,他们可以写下他们自己的选择,自定义文本。

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

您可以使用以下语法:

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

您可以按照以下方式进行:

<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