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

【问题标题】：How to add custom option to ng-options output?如何将自定义选项添加到 ng-options 输出？
【发布时间】：2016-03-24 00:43:46
【问题描述】：

我在表格中创建了一个选择，从列表中获取一些电子邮件地址。代码如下：

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

如何添加自定义选项？

我的目的是为用户添加“自定义”选项：如果他们选择该选项，他们可以写下自己的选择，即自定义文本。

【问题讨论】：

这里已经回答了这个问题：stackoverflow.com/questions/22312150/…
该解决方案引入了一个空白选项...

标签： javascript angularjs select option ng-options

【解决方案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 ;
}

【讨论】：

我的目的是为用户添加一个“自定义”选项：如果他们选择该选项，他们可以写下自己的选择，一个自定义文本（我已经更新了我的问题）。
而不是 ng-options 属性中的“emails”，使用“getEmails”函数根据上下文返回不同的列表。
@smartmouse 我更新了我的答案以建立一个更像您正在寻找的列表。这将允许您根据需要订购列表
干得好，谢谢。无论如何，我不需要在数组中“存储”自定义文本。这是对他的自定义文本的“一次性”使用。
@smartmouse 因为它正在构建新列表，所以只有在您删除自定义值 null 或重新加载视图时，它才会限定为下拉列表，它不会有额外的选项。因此，它并没有真正将任何内容保存到您的 emails 对象中，如果您要在下拉列表之外的页面上输出电子邮件，它将没有您的自定义值

【解决方案2】：

你可以使用这个语法：

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

【讨论】：

【解决方案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

【讨论】：

这似乎是解决方案，但请告诉我为什么它有效。例如，如果我向value 添加一个值，为什么它会显示一个空白选项？
如果您查看生成的 html，这些值是由 ng-options 分配的，您正在手动添加一个外部值，这会干扰 ng-options 分配的 id，这个 id 是您的索引数据数组。希望它能为你澄清一点。
是的，很清楚。是否可以在选项列表末尾移动附加选项？
@smartmouse 不以这种方式添加选项总是将手动添加的选项放在列表顶部。
猜你将不得不从你的控制器将一个自定义选项推送到数组中。