Javascript 角度选择下拉列表,带有一个选项,允许用户添加自定义选项

Javascript 角度选择下拉列表,带有一个选项,允许用户添加自定义选项,javascript,html,angularjs,select,Javascript,Html,Angularjs,Select,我有一个HTML选择下拉列表,要求用户从一些预先选择的安全问题中选择一个问题。(如“你最喜欢的城市是什么”、“你的车是什么颜色”等) 如何向列表中添加另一个选项,如“编写自己的问题”,当用户选择该选项时,将显示一个新的输入框,供用户编写自己的问题 我可以想到的一个策略是创建一个带有ng show的输入元素,以根据Select的值隐藏/显示它。有更好的方法吗?您的最佳选择可能是模拟一个选择框(可能使用样式化的单选按钮),但在其中添加一个额外的选项作为输入。我已经为一些项目做了类似的事情,并认为它并

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

如何向列表中添加另一个选项,如“编写自己的问题”,当用户选择该选项时,将显示一个新的输入框,供用户编写自己的问题


我可以想到的一个策略是创建一个带有ng show的输入元素,以根据Select的值隐藏/显示它。有更好的方法吗?

您的最佳选择可能是模拟一个选择框(可能使用样式化的单选按钮),但在其中添加一个额外的选项作为输入。我已经为一些项目做了类似的事情,并认为它并不特别困难,但是还有很多要考虑的问题(包括可访问性和键盘控制)。p>
或者你可以在网上找到许多开源指令中的一个。虽然它可能不完全是您想要的,但它可能是一个好的选择。

这里有一个完全没有JS的可能性:这可能需要您使用
标记中的
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>
您的变量名可能会有所不同,但如果需要,这是我将使用的基本过程。也可能有更好的(角度)指令或函数,可以更好地获取注入文本框的值(可能通过名称或父子关系)

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

谢谢


克里斯

我觉得这很合理
  addItem = function () {
      $scope.items[] = document.getElementById("newItem").value;
  }