1

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'},
// . . .

 ];
2
  • Angular select & multiple select
    – Maher
    Commented Dec 14, 2015 at 7:56
  • @Maher I don't want multiple select. I want an entirely new select dropdown each time someone clicks the add button.
    – Ken
    Commented Dec 14, 2015 at 8:03

3 Answers 3

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>

1
  • you can add different options for each one in your newSelectModel
    – Maher
    Commented Dec 14, 2015 at 8:22
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.

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>
1
  • what do you mean by availableOptions?
    – Ken
    Commented Dec 14, 2015 at 7:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.