Question

受到以下JSFiddle的启发，我能够在表格中克隆一行。这是我的代码：

  <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>

当我克隆第一行时，一切都没问题。但是当我克隆第二个时，它被克隆但与原始元素在同一行上。结果如下： result

我该怎么做才能把克隆的线放在线下？

Answer 1

您将内容作为另一列插入$ time (javac Hello.java && java Hello) Hello from Java real 0m0.554s user 0m1.073s sys 0m0.068s内，实际上您应该将其插入其中。

使用after()方法代替tr，append()

中的jqLite也支持angularJS

修改

无论如何，你不应该直接在你的控制器中操纵HTML行。这会导致当角度检测到更改时，重新渲染$scope.rows集合（您的方法中没有更改）并丢失原始行。

你需要在你的控制器中做些什么（这是伪代码）

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

更新行集合将导致angularJS重新渲染ng-repeat，您将看到新添加的行。请注意，我使用angular.copy()方法只是因为我不知道您的行是否属于＆＃39;元素是对象，字符串，数字或什么。关键点是 - 更新您的收藏，按照您希望的方式设置它，并让角度重绘它。

克隆在ng-repeat中

1 个答案: