javascript - 动态表单使用 Angular 附加ng-repeat html

Question

请问，我想使用 Angular 创建动态表单，

那么这个动态表单按钮点击就是append ng-repeat html

按钮单击有操作，但我无法附加到 ng-repeat 数据，

我想附加多个 ng-repeat html

我该怎么办，请帮帮我，谢谢~!

Angular

$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

不要每次都将选择框附加到 dom，而是使用 ng-repeat 使用带有一个元素的数组，然后单击将一个新元素插入该数组。这样每次都会使用 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>