AngularJS：我们如何使用 AngularJS 将选择框和选项动态添加到 DOM 中

【问题标题】：AngularJS: How do we dynamically add Select Box and options to that select box to the DOM using AngularJSAngularJS：我们如何使用 AngularJS 将选择框和选项动态添加到 DOM 中
【发布时间】：2013-12-09 07:08:57
【问题描述】：

一旦将带有空选项的选择框动态添加到 DOM，我们如何将选项（ng-options）添加到该选择框。我有一个场景，用户可以在运行时向 DOM 添加多个选择框，然后他可以向动态添加的选择框添加值。

非常感谢您对此的任何帮助。非常感谢。

【问题讨论】：

尝试在您的问题中更具体。能否提供示例代码？

标签： angularjs

【解决方案1】：

select 元素的 ng-options 属性可以帮助您迭代生成选项。您可以在控制器中维护您的动态选项。更新选项数据模型后，将刷新选择元素的选项。

查看

<div ng-controller="myCtrl">
  <select ng-model="selected" ng-options="o.label for o in options">
    <option value="">-------</option>  <!--not selected option-->
  </select>
  <button ng-click="addOption('option'+(options.length+1))">Add</button>
</div>

控制器

angular.module('app',[])
.controller("myCtrl",function($scope){
  $scope.options = [{label:"option1",value:"1"},{label:"option2",value:"2"},{label:"option3",value:"3"}];

  $scope.addOption = function(text){
    $scope.options.push({label:text,value:text});
  }
});

这是jsfiddleDemo。

希望对你有帮助。

【讨论】：