CODEWITHSUNDEEP
angularjs
user3081815
user3081815

Reputation: 51

AngularJS: How do we dynamically add Select Box and options to that select box to the DOM using AngularJS

Once the Select Box with empty options is added dynamically to the DOM, how do we add the options (ng-options) to that select box. I have a scenario where user can add multiple select box to the DOM at run time and then he can add values to the dynamically added select boxes.

Any help on this is much appreciated. Many Thanks.

Upvotes: 4

Views: 11058

Answers (1)

Chickenrice
Chickenrice

Reputation: 5727

The ng-options attribute of select element could help you generate options iteratively. You could maintain your dynamical options in controller. The options of select element will be refresh once the options data model has been updated.

View

<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>

Controller

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});
  }
});

Here is a jsfiddleDemo.

Hope this is helpful to you.

Upvotes: 5

Related Questions