每当在angularjs中单击前一个元素时添加新的选择元素答案

【问题标题】：add new select element whenever previous one is clicked in angularjs每当在angularjs中单击前一个元素时添加新的选择元素
【发布时间】：2016-09-27 20:05:12
【问题描述】：

我想在现有的和最后一个被点击时添加新的选择列表。

我想要一个选择列表，它前面的文本框和删除选项来删除行。

到目前为止，我已经为默认选择列表添加了一个视图，该视图将在表单打开时出现，即

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

但它无法获得我需要的输出。

【问题讨论】：

标签： angularjs dom drop-down-menu dom-manipulation

【解决方案1】：

您不应该在您的 Angular 应用程序中使用 jquery，您可以在附加 md 选择时执行类似的操作。在控制器中维护一个选择元素数组（只是对象，而不是实际的 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);
  };
}

【讨论】：