dynamic form use angular append ng-repeat html

Question

Excuse me, I want to use angular create dynamic form,

Then this dynamic form button click is append ng-repeat html

Button click have action , but i can't append to ng-repeat data,

I want to append multiple ng-repeat html

How can I do, please help me , thanks~!

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>

sorry! my english is not good. i want click add_list function is add multiple html select. — Bruce
– Bruce, Commented May 18, 2017 at 5:05
It's not the angular way to manipulate dom in such a way. Below answer is the perfect angular way to do — shaunak1111
– shaunak1111, Commented May 18, 2017 at 5:47

XYZ · Accepted Answer · 2017-05-18 06:10:53Z

1

Instead of appending slect box to dom each time use ng-repeat using an array with one element and on click insert a new element to that array.so each time new select box will be creted in the dom using ng repeat

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>

edited May 18, 2017 at 6:10

answered May 18, 2017 at 5:32

XYZ

4,4782 gold badges18 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Bruce Over a year ago

thanks ! this is work! excuse me, I have a question you would like to ask, if i want to push html is Different, ex. push this html have close button, sorry maybe my english is Hard to understand....

XYZ Over a year ago

@Bruce An easy soln: check the index if index is not first show close button

shaunak1111 Over a year ago

Add data-ng-click to make it HTML5 compliant stackoverflow.com/questions/15256396/…

XYZ Over a year ago

@shaunak1111 Updated.Thanks

Bruce Over a year ago

@XYZ very thanks! is to solve problems ! very thanks:)

|

Collectives™ on Stack Overflow

dynamic form use angular append ng-repeat html

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related