Question

我有一个select元素，并希望允许用户单击添加按钮添加其他选择元素，以便用户可以继续选择其他项目。

当我使用下面的代码时，当我单击＆＃34;添加＆＃34;时，下拉列表不会显示，也不会添加其他选择元素。按钮。

有关如何正确执行此操作的任何建议吗？

澄清：我想添加始终包含相同项目的新下拉列表。所以我想添加新的select元素，而不是select元素中的新项。

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>

控制器：

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

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

 ];

Answer 1

我为你创造了这个，我希望这能帮到你。

＆＃13;

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

＆＃13;

Answer 2

在用于多重选择的<div>内，您可以使用ui-select2="multi" ng-model="editProject.project.class"，然后您可以在<div>内的下拉列表中选择所需的模型值。将主要是锻炼。

Answer 3

您的指令设置不正确。

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

如何在Angular

3 个答案: