無論何時在angularjs中單擊前一個元素時添加新的select元素

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時你可以做這樣的事情。 在控制器中維護一個選擇元素的數組（只是對象，而不是實際的html元素）並使用ng-repeat來呈現它們。 每當你想添加或刪除只是添加或刪除控制器中的數組和角將會做其餘的。

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