Question

我希望每当点击exisisting和最后一个时添加新的选择列表。

我希望有一个选择列表，在其前面的文本框，并删除删除该行的选项。

到目前为止，我已经为默认选择列表添加了一个视图，当列表打开时，它将存在。

<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渲染它们。无论何时你想添加或删除只是在控制器中的数组中添加或删除，角度将完成其余的工作。

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

只要在angularjs中单击上一个元素，就添加新的select元素

1 个答案: