Angular Select Dropdown 带有允许用户添加自定义选项的选项答案

【问题标题】：Angular Select Dropdown with an option to let the user add a custom optionAngular Select Dropdown 带有允许用户添加自定义选项的选项
【发布时间】：2016-01-31 09:44:50
【问题描述】：

我有一个表单中的 HTML 选择下拉菜单，它要求用户从一些预先选择的安全问题中选择一个问题。（如“你最喜欢的城市是什么”、“你的车是什么颜色的”等）

如何在列表中添加另一个选项，例如“自己编写”，当用户选择它时，会显示一个新的输入框供用户编写他/她自己的问题。

我能想到的一个策略是创建一个带有 ng-show 的输入元素，以根据 Select 的值隐藏/显示它。有没有更好的方法？

【问题讨论】：

这听起来很合理

标签： javascript html angularjs select

【解决方案1】：

这里有一个完全没有 JS 的可能性：HTML combo box with option to type an entry，这可能需要您在 <select> 标记中使用 ng-options 指令。

但是，如果您更喜欢使用导入的库，可以先在最后一个选项中注入一个文本输入框：

  <select ng-model="selectedItem">
    <option ng-repeat="item in items" value="{{item}}">{{item}}</option>
    <option ng-blur="addItem()"><input type="text" placeholder="Write your own" id="newItem"></option>
  </select>

然后定义 ng-blur 函数以将新项目添加到项目数组中的项目列表中：

  addItem = function () {
      $scope.items[] = document.getElementById("newItem").value;
  }

您的变量名称可能会有所不同，但如果需要，这是我将使用的基本过程。可能还有更好的（Angular）指令或函数可以更好地获取注入文本框的值（可能通过名称或父子关系）。

希望这会为您指明正确的方向。

谢谢，

克里斯

【讨论】：

【解决方案2】：

您最好的选择可能是write a custom directive，它将模拟一个选择框（可能使用样式单选按钮），但在其中添加一个额外的选项，即输入。我为几个项目做了类似的事情，并认为这并不是特别困难，但有很多需要考虑（包括可访问性和键盘控制）。

或者您可以在网上找到众多开源指令之一。虽然它可能不是您正在寻找的，UI-Select 可能是一个不错的选择。

【讨论】：