How to dynamically add multiple select elements in Angular

Question

I have a select element and would like to allow the user to click an add button add additional select elements so that the user can continue to select additional items.

When I use the code below, the dropdown does not display and no additional select elements are added when I click the "Add" button.

Any suggestions on how to do this correctly?

Clarification: I want to add new dropdowns that always include the same items. So I want to add new select elements, not new items within a select element.

HTML:

<select ng-repeat="class in project.classes" class="form-control" id="class" name="class" 
ng-model="editProject.project.class" ng-options="classid.class group by classid.code for classid in editProject.classids track by classid.class">

    <option value="">--Select Class--</option>

</select>

<button ng-click="editProject.project.class.push({})">Add</button>

Controller:

var editProject = this;
editProject.project.class = [];
editProject.classids = [

  {code: '1', class: 'Chemicals'},
  {code: '2', class: 'Paints'},
// . . .

 ];

@Maher I don't want multiple select. I want an entirely new select dropdown each time someone clicks the add button. — Ken
– Ken, Commented Dec 14, 2015 at 8:03

shA.t · Accepted Answer · 2015-12-15 11:35:41Z

3

I create this for you, I hope this helps you.

<!DOCTYPE html>
<html ng-app="dynamicallySelect" ng-controller="ExampleController">

<head>
  <title>My ParseApp site</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
</head>

<body>

  <div ng-repeat="select in selects">
    <select name="{{select.name}}" ng-model="select.model" multiple>
      <option value="option-1">Option 1</option>
      <option value="option-2">Option 2</option>
      <option value="option-3">Option 3</option>
    </select>
    multipleSelect[{{$index}}] = {{select.model}}
  </div>

  <button ng-click="addMultipleSelect()">add select</button>

  <script>
    angular.module('dynamicallySelect', [])
      .controller('ExampleController', ['$scope',
        function($scope) {

          $scope.selects = [];

          $scope.data = {
            singleSelect: null,
            multipleSelect: [],
            option1: 'option-1'
          };

          $scope.addMultipleSelect = function() {
            var newSelect = {
              name: "multipleSelect",
              model: "multipleSelectModel"
            }

            $scope.selects.push(newSelect);
          }

          $scope.forceUnknownOption = function() {
            $scope.data.singleSelect = 'nonsense';
          };
        }
      ]);
  </script>
</body>

</html>

edited Dec 15, 2015 at 11:35

shA.t

17k5 gold badges59 silver badges121 bronze badges

answered Dec 14, 2015 at 8:17

Maher

2,5471 gold badge21 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maher Over a year ago

you can add different options for each one in your newSelectModel

Soven K Rout · Accepted Answer · 2015-12-14 06:46:55Z

0

Inside the <div> where you are using for multi select you can use ui-select2="multi" ng-model="editProject.project.class", then you can write the select model value what you want in your drop down inside that <div>.This will mostly workout.

answered Dec 14, 2015 at 6:46

Soven K Rout

1351 silver badge12 bronze badges

Comments

CodePrimate · Accepted Answer · 2015-12-16 06:41:02Z

0

Your directive is set up incorrectly.

<select ng-model="editProject.project.class">
      <option ng-repeat="class in project.classes" value="{{class.code}}">{{option.class}}</option>
</select>
<button ng-click="project.classes.push({class: 'New Class'})">Add Select</button>

edited Dec 16, 2015 at 6:41

answered Dec 14, 2015 at 6:51

CodePrimate

6,66613 gold badges50 silver badges86 bronze badges

1 Comment

Ken Over a year ago

what do you mean by availableOptions?

Collectives™ on Stack Overflow

How to dynamically add multiple select elements in Angular

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related