在 Angularjs 中针对特定领域使用 ng-repeat 的最佳方式答案

【问题标题】：Best way to use ng-repeat in Angularjs for specific field在 Angularjs 中针对特定领域使用 ng-repeat 的最佳方式
【发布时间】：2015-04-09 21:01:33
【问题描述】：

我是 Angularjs 的新手，我的应用程序（使用 Angular 和 Rails 构建）花费了太多时间来加载图像/数据。所以我打算优化代码。这是一个非常快速和简短的问题。使用 ng-repeat 的最佳方式是什么？我打算在 ng-repeat 中使用track by。

在我的$scope.attributes 中，我从服务器获取了数千条数据。每个都有很多领域。但我想使用其中的单个字段。所以我尝试了这样的事情：

<div ng-repeat="attribute in attributes track by attribute.name" >
<li> {{attribute.name}} </li>
</div>

这是正确的方法吗？我已经看到很多例子到处都使用track by task.id 那么我可以使用任何specific field name 代替 id 吗？我也可以使用过滤器吗？ $$hashkey 方法的含义是什么？我想加载图像，这需要更多时间。请专家建议。

【问题讨论】：

制作和分享样本 plunker 或 fiddle 会更好地帮助您。
我同意你的观点，但我正在从服务器获取数据。我只是想要一些建议，这是使用它的最佳方式。
您对数千张图片有何期望。听起来问题与一次显示的数据过多有关，而不是 ng-repeat 的工作原理
无限滚动的延迟加载怎么样？看这里ng-lazy.com
@charlietfl ：是的，获取更多数据，并且必须从这些数据中显示图像。我使用ng-lazy-image 作为指令，但静止图像需要时间来加载。所以我认为我可以通过对 ng-repeat 进行实验来减少一点时间

【解决方案1】：

如果您通过 .name 进行跟踪，它将使用 .name 作为标识符，例如，如果列表发生更改，它将通过 .name 找到 ROW

如果列表不会改变，看一种方式绑定

<div ng-repeat="attribute in ::attributes track by $index" >
<li> {{attribute.name}} </li>
</div>

-- 我相信这会给你一个围绕 LI 的 DIV

与您的 Q 无关，但刚刚进行了一些 AngularJS 性能调整。考虑使用 ng-if 代替 ng-show / ng-hide ， ng-show/hide 仍然会产生 DOM ， ng-if 不会。（您可能已经这样做了）

【讨论】：

所以 $index 会按 id 排序吗？以及使用::的目的是什么
:: 用于单向绑定，这意味着一旦事情解决，就没有观察者了。
不，它不会按 id 排序。对于我们的 APP，我们在服务器上进行了排序，因为它对我们的使用有意义。
谢谢史蒂夫。所以我应该把attribute.name改成$index
一旦你读过你的数据，做一些类似 $timeout(function () { console.log("Binding Done"); });这将让您知道绑定何时完成，如果需要一些时间，那么您会遇到客户端性能问题。我会使用 $index