Angular Select Dropdown带有一个选项，允许用户添加自定义选项

Angular Select Dropdown with an option to let the user add a custom option

本文关键字：选项 用户 自定义 添加 许用户 Dropdown Select 有一个 Angular      更新时间：2023-09-26

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

如何在列表中添加另一个选项，如"编写自己的问题"，当用户选择该选项时，会显示一个新的输入框，供用户编写自己的提问。

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

这里有一种完全无JS的可能性：HTML组合框，带有键入条目的选项，可能需要在<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模糊函数，将新项目添加到项目数组中的项目列表中：

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

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

希望这能为你指明正确的方向。

谢谢，

Chris

您最好的选择可能是编写一个自定义指令，模拟一个选择框（可能使用样式化的单选按钮），但在其中添加一个额外的输入选项。我为几个项目做过类似的事情，认为这不是特别困难，但有很多需要考虑（包括可访问性和键盘控制）。

或者你可以在网上找到许多开源指令中的一个。虽然这可能不是你想要的，但用户界面选择可能是一个不错的选择。

相关文章：