angularjs - 如何在没有 ng-repeat 的情况下在 Angularjs 中实现“加载更多”分页？

Question

由于 ng-repeat 会在模型更改等事件上重绘所有项目，所以在 angularjs 中实现“加载更多”行为/分页的更好方法是什么？

Answer 1

你到底看到了什么让你想要避免ngRepeat？我起草了一个简单的例子来说明什么被重绘，什么没有：

示例 1：http: //jsfiddle.net/langdonx/uf2C9/

如果您检查控制台，您会看到当您单击添加按钮将另一个项目添加到模型时，只会渲染新添加的项目。

示例 2：http: //jsfiddle.net/langdonx/uf2C9/2/

操作模型中的每个项目，仍然不会重新绘制整个ngRepeat，它只是更新它需要的内容。

示例 3：http: //jsfiddle.net/langdonx/uf2C9/1/

为了帮助说明示例 2 是合理的，我添加{{item.name}}到图像的 src 只是为了确保它会改变（它会改变）。

那么你到底想避免什么？

Answer 2

我最近遇到了与 ng-repeat 类似的问题，请看这里。基本上你可以在这里应用这种方法。拥有所有文档的列表，以及视图中仅包含文档的子列表。当您到达列表末尾时，将更多文档加载到所有文档中，然后从那里抓取最后一个 X 作为可见列表，但在加载时继续从顶部删除。

是的，这将导致大量重绘。但这不会引起注意。

您还可以使用 bind-once 避免大量重绘（自 1.3 以来为原生），但它仍会产生大量观察者。