动态表格使用角度追加ng-repeat html

Question

打扰一下，我想用角度创建动态表格，

然后，此动态表单按钮单击将追加ng-repeat html

点击按钮可以执行操作，但是我无法附加到ng-repeat数据中，

我想附加多个ng-repeat html

我该怎么办，请帮助我，谢谢〜！

角度的

$scope.add_list = function()
  {
     var data = angular.element(document.getElementById("list_wrap"));
     data.append('<div class="col s6"> <label>product</label> <select class="select-with-search" name="commodity[]">  <option ng-repeat="(key, value) in commodity" value="{{value.id}}">{{value.commodity}}</option> </select> </div>');
  }

html

<div class="row">
<div id="list_wrap" class="col s12">
  <!-- append insert wrapper -->
</div>

<div  class="col s12">
  <div id="list_" class="col s12">
    <div class="col s6">
      <label>product</label>
      <select class="select-with-search" name="commodity[]">
        <option value="" selected></option>
        <option ng-repeat="(key, value) in commodity" value="{{value.id}}">{{value.commodity}}</option>
      </select>
    </div>
    <div class="input-field col s1">
       <!-- add button -->
      <span class="cursor_pointer" ng-click="add_list()">
        <i class="material-icons prefix">playlist_add</i>
      </span>
    </div>
  </div>
</div>

Answer 1

每次使用ng-repeat而不是将选择框添加到dom时，使用具有一个元素的数组，然后单击将新元素插入该数组。因此每次使用ng repeat在dom中创建新的选择框

 angular.module('test',[]).controller('TestController',function($scope){ $scope.selectArray = [{ item:null }]; $scope.commodity = [{ id : 1, commodity : "First" },{ id :2, commodity : "Two" },{ id :3, commodity : "Three" },{ id :4, commodity : "Four" }] $scope.remove = function(index){ $scope.selectArray.splice(index,1) } $scope.add_list = function() { var newItem = { item:null } $scope.selectArray.push(newItem); /* var data = angular.element(document.getElementById("list_wrap")); data.append('<div class="col s6"> <label>product</label> <select class="select-with-search" name="commodity[]"> <option ng-repeat="(key, value) in commodity" value="{{value.id}}">{{value.commodity}}</option> </select> </div>');*/ } $scope.getSelectValue = function(){ angular.forEach($scope.selectArray,function(val,key){ console.log(key+":"+val.item); }) } }) 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div class="row" data-ng-app="test" data-ng-controller="TestController"> <div id="list_wrap" class="col s12"> <!-- append insert wrapper --> </div> <div class="col s12"> <div id="list_" class="col s12"> <div class="col s6" data-ng-repeat="select in selectArray track by $index"> <label>product </label> <select class="select-with-search" data-ng-model="select.item" name="commodity[]" > <option data-ng-repeat="(key, value) in commodity" value="{{value.id}}">{{value.commodity}}</option> </select> <button data-ng-if="!$first" data-ng-click="remove($index)">Close</button> </div> <div class="input-field col s1"> <!-- add button --> <button class="cursor_pointer" data-ng-click="add_list()"> <i class="material-icons prefix">playlist_add</i> </button> <button class="cursor_pointer" data-ng-click="getSelectValue()"> <i class="material-icons prefix">SUBMIT</i> </button> </div> </div> </div>