Добавить новый элемент select при каждом нажатии на предыдущий элемент в angularjs

Question

Я хочу добавить новый список выбора всякий раз, когда щелкает существующий и последний.

Я хочу иметь список выбора, текстовое поле напротив него и удалить опцию, чтобы удалить строку.

До сих пор я добавил представление для списка выбора по умолчанию, который будет там, когда откроется форма, т.е.

<div id="inputMaterialContainer">
    <md-select aria-label="selectMaterial" ng-model="inputMaterial" ng-change="appendSelectOption()" md-on-open="loadMaterials()">
        <md-option><em>None</em></md-option>
        <md-option ng-repeat="material in inputMaterialArray" ng-value="material">{{material}}</md-option>
    </md-select>
</div>

У меня есть контроллер для формы, которая выглядит следующим образом

app.controller('AddPeopleDialogCtrl', AddPeopleDialogCtrl);

function AddPeopleDialogCtrl($scope, $timeout)
{
    var $materialSelectHTML = "<md-select  ng-change='appendSelectOption' ng-model='inputMaterialArray'><md-option><em>None</em></md-option><md-option ng-repeat='material in inputMaterial' ng-value='material'>{{material}}</md-option></md-select>";
    $scope.materialArray.push($materialSelectHTML);

    $scope.appendSelectOption = function(){
        var materialContainer = angular.element(document.querySelector('#inputMaterialContainer'));
        materialContainer.append($materialSelectHTML);
        $compile($materialSelectHTML)($scope);
    };

$scope.loadMaterials = function(){
    return $timeout(function(){
    $scope.inputMaterialArray = $scope.inputMaterialArray || ['sensor1','sensor2','sensor3','sensor4','plate1','plate2','material1','material2'];
    }, 650);
  };
}

Но он не может получить вывод, как мне нужно.

Answer 1

Вы не должны использовать jquery в своем угловом приложении, вы можете сделать что-то подобное, когда добавляете md select. Поддерживайте массив элементов select в вашем контроллере (только объекты, а не фактические элементы html) и визуализируйте их, используя ng-repeat. Всякий раз, когда вы хотите добавить или удалить, просто добавьте или удалите из массива в контроллере, а Angular сделает все остальное.

В HTML изменить это

<div id="inputMaterialContainer">
     <md-select aria-label="selectMaterial" 
                ng-model="inputMaterial"
                ng-repeat="selectOption in materialSelectArray"
                ng-change="appendSelectOption()" 
                md-on-open="loadMaterials()">
        <md-option><em>None</em></md-option>
        <md-option ng-repeat="material in inputMaterialArray" 
                   ng-value="material">{{material}}</md-option>
     </md-select>
 </div>

А в контроллере просто инициализируйте массив и добавляйте в него новый объект каждый раз, когда вы хотите добавить новый выбор

что-то вроде этого

app.controller('AddPeopleDialogCtrl', AddPeopleDialogCtrl);

function AddPeopleDialogCtrl($scope, $timeout){
     $scope.materialSelectArray = [
          {
             name:'select0' 
          }
     ]

$scope.appendSelectOption = function(){
    $scope.materialSelectArray.push({
           name:'select'+ $scope.materialSelectArray.length
       })
};

 $scope.loadMaterials = function(){
     return $timeout(function(){
     $scope.inputMaterialArray = $scope.inputMaterialArray || ['sensor1','sensor2','sensor3','sensor4','plate1','plate2','material1','material2'];
   }, 650);
  };
}