CODEWITHSUNDEEP
javascriptangularjs
Nourp
Nourp

Reputation: 47

clone within an ng-repeat

Inspired by the following JSFiddle , I became able to clone a row in my table. Here is my code:

  <tr ng-repeat="rowContent in rows track by $index" id="{{ 'object-' + $index }}">
    <td>{{rowContent}}</td>
    <td>{{rowContent}}</td>
    <td>{{rowContent}}</td>
    <td>{{rowContent}}</td>
    <td>{{rowContent}}</td>
    <td>{{rowContent}}</td>
    <td>{{rowContent}}</td>
    <td>{{rowContent}}</td>
    <td>{{rowContent}}</td>
    <td>{{rowContent}}</td>
    <td>{{rowContent}}</td>
    <td>{{rowContent}}</td>
    <td>{{rowContent}}</td>
    <td>{{rowContent}}</td>
    <td> <button ng-click="clickToClone(('object-' + $index), 'cloneDiv')">
        Click to Clone
    </button></td>
</tr>

<tr id="cloneDiv"></tr>

When I clone the first line everything is alright. However when I clone the second, it is cloned but on the same line with the original element. The result is in the following screenshot: result

What should I do please to put the cloned line under not next to the line?

Upvotes: 1

Views: 357

Answers (1)

Gonzalo.-
Gonzalo.-

Reputation: 12672

You're inserting the content inside the tr, as another column, and actually you should be inserting it after it.

use after() method instead of append(), which is also supported by jqLite in angularJS

Edit

anyway you shouldn't be manipulating the HTML rows directly in your controller. That would cause that, when angular detects a change, re-render $scope.rows collection (which haven't been changed in your method) and lost your original row.

What you need to do in your controller is something like (this is pseudo-code)

 $scope.clickToClone = function(rowindex)  {
     var rowSource = $scope.rows[rowindex];
     $scope.rows.splice(rowindex, 0, angular.copy(rowSource));
 }

updating rows colletion will cause angularJS to re-render the ng-repeat and you'll see the newly added row. Keep in mind that I use angular.copy() method just because I don't know if your rows' elements are object, strings, numbers or what. The key point is - update your collection, setting it as how you would like it to be, and let angular to redraw it .

Upvotes: 1

Related Questions