javascript - Angular 选择下拉菜单,其中包含一个选项,可让用户添加自定义选项

标签 javascript html angularjs select

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

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

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

最佳答案

这里有一个完全不依赖 JS 的可能性:HTML combo box with option to type an entry这可能需要您使用 ng-options <select> 中的指令标签。

但是,如果您希望坚持使用导入的库,则可以首先将文本输入框注入(inject)最后一个选项:

  <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)指令或函数可以更好地获取注入(inject)文本框的值(可能通过名称或父子关系)。

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

谢谢

克里斯

关于javascript - Angular 选择下拉菜单,其中包含一个选项,可让用户添加自定义选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33444918/

相关文章:

php - 将php变量发送到另一个php页面

javascript - 使用原型(prototype)自动调整文本区域大小?

javascript - 谷歌地图交通层具有特定的时间戳

angularjs - 如何在 AngularJS 的 $q 中处理单个 404

Javascript:使用 "Module Pattern"引用变量,有什么想法吗?

javascript - 创建正确的 json 字符串以存储在本地存储中

javascript - 如何在 Chrome 中使用命令行进行调试

javascript - 如何通过 REST 使用 Kinvey 执行 'Hello World'?

html - 如何通过编码在 Internet Explorer 中启用兼容性 View

java - 在 android 应用程序中使用为 angular js 编写的 rest api