ng-repeat 的简单一种方式绑定？答案

【问题标题】：Simple One way binding for ng-repeat?ng-repeat 的简单一种方式绑定？
【发布时间】：2013-11-05 19:28:41
【问题描述】：

我读过一些文章说如果超过 2000 项，ng-repeat 会导致性能不佳，因为有太多的双向绑定可以观看。我是 angularjs 新手，无法理解 ng-repeat 和双向绑定之间的关系：

ng-repeat（如输出 json 对象列表）是否一定要创建双向绑定？
有没有一种简单的方法来做 ng-repeat 只使用一种方式绑定？（最好不需要外部模块）

【问题讨论】：

如果你有这么多的数据，你应该考虑使用一种分页。
我想您将不得不使用 ng-bind（单向数据绑定）而不是 ng-model（双向数据绑定）编写自己的自定义 ng-repeat 指令。
@Beterraba 他只是举了一个例子。他的实际意思是大型应用程序，可能在不同的小部件中包含更多数据。

标签： angularjs angularjs-ng-repeat

【解决方案1】：

就像 user1843640 提到的，如果你在 Angular 1.3 上，你可以使用一次性绑定，但是，为了清楚起见，你需要把 :: 放在所有绑定上，而不仅仅是转发器。文档说这样做：

<div ng-repeat="item in ::items">{{item.name}}</div>

但是，如果我计算观察者，这只会删除一个。要真正减少双向绑定的数量，请将 :: 放在转发器内的绑定上，如下所示：

<div ng-repeat="item in ::items">{{::item.name}}</div>

这里有两个 plunker 会显示观察者的数量：

All Bindings
Repeater Only

感谢 Miraage 提供统计观察者的功能https://stackoverflow.com/a/23470578/2200446

【讨论】：

在我的场景中，我在一个页面中有 3 个选项卡。所以对于页面加载，它正在工作，因为它将加载第一个选项卡，当我在 3 个选项卡之间切换时，它不会触发，因为它是单个绑定。你能为这种情况提供一些指导吗？在选项卡之间切换时，2 路绑定需要时间。

【解决方案2】：

对于使用或升级到 Angular 1.3 的任何人，您现在可以使用“一次性绑定”。对于 ng-repeat，它看起来像这样：

<div ng-repeat="item in ::items">{{item.name}}</div>

注意::items 语法。

更多信息请查看Angular documentation for expressions。

【讨论】：

【解决方案3】：

This blog post 提出了一些有趣的解决方案。最终结果是：

升级到 AngularJS 1.1.5 并使用 limitTo 和 Infinite scrolling。 AngularJS ng-repeat 从 1.1.4 版本开始提供 limitTo 选项。我稍微调整了 Infinite Scroll 指令，以使在不具有 100% 窗口高度的容器内滚动成为可能。

基本上，您会限制最初渲染的对象数量，然后根据需要使用无限滚动指令来渲染更多对象。由于您不需要外部模块，只需根据需要使用您自己的脚本来模拟无限滚动功能。

注意：这应该可以解决您的性能问题，但不会删除双向绑定。

【讨论】：

我按照你说的试过了，但是当我向下滚动时，它加载了更多的项目，我的页面卡住了

【解决方案4】：

ng-model 生成的任何东西都会在数据（模型）上有一个观察者，如果它超过 200 个观察者，这会降低页面性能。
请参阅此单向绑定http://blog.scalyr.com/2013/10/31/angularjs-1200ms-to-35ms/，但请确保正确使用它

希望对你有帮助！！！

【讨论】：