javascript - ngRepeat 的速度问题。是否可以在 AngularJS 中重用 DOM 部分？

Question

我正在显示一个包含大量数据的列表，它变得非常慢非常快(>5 个条目 = 太慢)。我稍微修改了一下，发现问题不是数据量而是生成的许多 DOM 元素。

我展示了一个只有一些元信息的表格。对于每个表格行，还有两个隐藏的表格行，其中包括所有详细数据和一个编辑表单。点击一行打开详细信息，点击一些编辑按钮切换到编辑行。
没有编辑部分的简化 plunkr 可用 here .

问题在于，对于每个条目，都会生成三行，其中包含大量标签和数据。分页不是解决方案，因为只有 4 或 5 个条目时问题已经以显着的方式表现出来。我可以动态加载详细数据，但我发现瓶颈是 ng-repeat 必须创建的许多标签。 (我在这里弄错了吗？)
当我删除细节并编辑部分时，即使有 10 多个条目，页面加载速度也相当快。

一个解决方案可能是编写一次详细信息和编辑部分并将其隐藏，然后将其动态移动到相应的条目。我知道直接 DOM 操作在 Angular 中是不受欢迎的。有更好的解决方案吗？ A plunkr that illustrates the idea

Answer 1

我查看了 angular.element 并用解决方案更新了第二个 plunkr。我仍然不确定是否有更优雅的解决方案。我将实现它并查看它是否解决了性能问题。

移动 DOM 部分:

<td id="detailPiece">
  Reuse this piece of DOM? Can it be done?<br />
  Tons of detail information, with edit capability etc.<br />
  {{detailItem.detail}}
</td>

是通过

实现的

angular.element('#detail'+index).append( angular.element('#detailPiece') ); 

对于我来说，空表行和所有内容看起来仍然像是一个“hacky”解决方案。