javascript - 在显示大集合时使用 ng-If 和 ng-repeat 隐藏不可见的项目

Question

我收藏了大量元素 - ~2000 件。

当用 ng-repeat 显示时，watchers 的数量是 16K，DOM 几乎没有生命。

我正在尝试使用 ng-if 显示表格中的项目，以便只有可见的项目可见。

我尝试过实现无限滚动，但是并没有解决watchers数量庞大的问题。所以我决定最好不要渲染不可见的元素。

是否有一个我可以在每个元素上放置的查询，它会快速告诉我该项目是否在页面上可见？

我的代码是:

<tr ng-repeat="mi in vm.displayDNAList track by $index">
 <span>{{ ::mi.name }}</span>
</tr>

Answer 1

对于渲染许多 DOM 元素的大量项目，即使是 ng-repeat 中最微不足道的项目处理也会让您的应用窒息。检查元素是否在 View 中的 DOM 相关解决方案不会告诉您嵌套组件是否已完全加载和呈现，从而导致错误。

我对这个问题的解决方案是 Angular 的 limitTo : limit: begin 过滤器，以及 iScroll 或 native scrollTop 和 scrollBottom 回调，它们根据浏览方向增加或减少 Controller 中的开始索引——一种前端分页，其中只有一个DOM 中显示了特定数量的项目。

<tr ng-repeat="item in items | limitTo : 100 : 600 track by $index">
    <span>{{ item.name }}</span>
</tr>

您需要找到最适合该应用的最佳 limitTo 数字，同时保持它的轻便和敏捷。