CODEWITHSUNDEEP
javascriptangularjs
Syed
Syed

Reputation: 2607

Clone div using Javascript and change inner DOM elements ID

I've a two static div tags, inside that I have one select tag and one text box with different ID's. So when I clone the tag, it just adds the same div tag to the DOM, but how can I change the inner DOM elements tag?

Here is my code 

        <div id="masterGrade" style="border-style: solid; width: 200px">
        <select id="selectGrade1">
            <option value="grade1">Grade 1</option>
            <option value="grade2">Grade 2</option>
            <option value="grade3">Grade 3</option>
            <option value="grade4">Grade 4</option>
        </select>
        <input type="text" id="text1"/>
    </div>
    <div style="border-style: solid;width: 200px">
        <select id="selectGrade2">
            <option value="grade1">Grade 1</option>
            <option value="grade2">Grade 2</option>
            <option value="grade3">Grade 3</option>
            <option value="grade4">Grade 4</option>
        </select>
        <input type="text" id="text2"/>
    </div>

My JS code

    $scope.addGrade = function() {  

        var div = document.getElementById('masterGrade'),
        clone = div.cloneNode(true); 
        clone.id = "some_id";
        document.body.appendChild(clone);
    }

Any ideas would be greatly appreciated.

Upvotes: 1

Views: 862

Answers (1)

Rayon
Rayon

Reputation: 36599

Mixing DOM api with angular is not a best practice. You must do it angular way(ng-repeat)

var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
  $scope.grades = [{}];
  $scope.addGrade = function() {
    $scope.grades.push({});
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='ctrl'>
  <button ng-click='addGrade()'>Add</button>
  <div style="border-style: solid; width: 200px" ng-repeat='grade in grades'>
    <select ng-model='grade.list'>
      <option value="grade1">Grade 1</option>
      <option value="grade2">Grade 2</option>
      <option value="grade3">Grade 3</option>
      <option value="grade4">Grade 4</option>
    </select>
    <input type="text" ng-model='grade.text' />
  </div>
  {{grades}}
</div>

Fiddle Demo

Edit: To deal with the index, use $index, The ngRepeat directive instantiates a template once per item from a collection. Each template instance gets its own scope, where the given loop variable is set to the current collection item, and $index is set to the item index or key.

var app = angular.module('app', []);
app.controller('ctrl', function($scope) {
  $scope.grades = [{}];
  $scope.addGrade = function() {
    $scope.grades.push({});
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.min.js"></script>
<div ng-app='app' ng-controller='ctrl'>
  <button ng-click='addGrade()'>Add</button>
  <div style="border-style: solid; width: 200px" ng-repeat='grade in grades'>
    <label for="select{{$index}}">Grade {{$index}}:</label>
    <select id='select{{$index}}' ng-model='grade.list'>
      <option value="grade1">Grade 1</option>
      <option value="grade2">Grade 2</option>
      <option value="grade3">Grade 3</option>
      <option value="grade4">Grade 4</option>
    </select>
    <br>
    <label for="text{{$index}}">Text{{$index}}:</label>
    <input id='text{{$index}}' type="text" ng-model='grade.text' size='10' />
  </div>
  {{grades}}
</div>

Fiddle Demo

Upvotes: 1

Related Questions