Javascript 如何在ng repeat中缓存变量？

假设我有一个长长的项目清单

this.items = [{id: 1, name: 'one'}, {id: 2, name: 'two'}, ...]; // 2000 items

我想在没有重载浏览器的情况下显示它们。 我的模板：

<div ng-repeat="item in $ctrl.items">
  <span>{{ ::item.id }}</span>
</div>

我有4001个观察者。哦，我哭了。 为什么不缓存

$ctrl.modeId

，它在整个模板中都是同一个变量，为什么它需要对这个该死的变量进行4000次监视

有什么解决办法吗

---

另外，我不能一次性绑定，因为我有一个按钮，可以切换模式。是的，我可以将整个

ng repeat

包装在

..

中，但是每次模式切换都会消耗大量资源。

您可以使用Angularjs的模板缓存功能，如下所示

<script type="text/ng-template" id="templateId.html">
  <div ng-repeat="item in $ctrl.items">
  <span>{{ ::item.id }}</span>
  </div>
</script>

或者通过$templateCache服务获取：

$templateCache.get('templateId.html')

---

通常，ng秀至少比ng更适合你-if@VinodLouis是的，你是对的，但这并不能解决观察者的问题。模板有这么简单吗？您可以尝试

{{：：item.id}{{：：item.name}

@Satpal好吧，不是这样，但很简单。它是列表组件，是页面的一部分。列表中的一个项目包括时间、标题、图标、另一个图标、文本。所以我的模板是25rows@Satpal使用ng开关可将观察者减少一半。谢谢你指出，但这还不够。实际上，我认为，我应该创建仅DOM指令，它将隐藏显示整个列表中的某些内容，如

$（'.list.list item.mode id'）.show（）

。这类似于在div中包装列表。对于穷人来说，插入大DOM节点并不简单browsers@vedmaque我的建议是，如果您的记录如您所说的那样不断增加，请不要在UI/浏览器上填充或显示整个数据，因为您目前有2000条记录，您可以一次尝试使用有限记录的延迟加载或分页功能，例如20或50。是的，我完全同意您的看法。显示一个包含许多项目的完整列表是非常糟糕的做法。但问题更多的是角度行为，当它观察变量时。

myApp.component('myComponent', {
   templateUrl: 'templateId.html'
});

$templateCache.get('templateId.html')