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

Question

我收集了大量元素 - 约 2000 件元素。

使用 ng-repeat 显示时，观察者数量为 16K，DOM 几乎不存在。

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

我尝试过实现无限滚动，但并不能解决观察者数量巨大的问题。所以我决定最好不要渲染不可见的元素。

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

我的代码是:

<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 滚动顶部和滚动底部回调，它们根据浏览方向提高或减少 Controller 中的开始索引 - 一种前端分页，其中只有一个具体的项目数量显示在 DOM 中。

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

您需要找到最适合该应用的最佳 limitTo 数字，同时保持其轻便灵活。