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 related solutions检查元素是否在视图中并不一定会告诉您所有嵌套组件是否已完全加载或呈现并可能导致错误。

我对此问题的解决方案是使用角度limitTo : limit: begin过滤器以及scrollTop和scrollBottom回调，根据滚动提升或减少begin索引方向（向上/向下） - 前端分页，任何时候只显示特定数量的项目 - 没有任何沉重的DOM观察者。

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

您需要找到最适合应用的最佳limitTo号码，同时保持其轻盈灵活。

Answer 2

您可以使用过滤器将结果限制为仅显示可见元素。这假设mi对象具有名为visible的属性。

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

Answer 3

我建议你在使用ng-repeat

之前在javascript中使用过滤器

vm.displayDNAList = data.filter(function(d){
  return d.element;
});

如果你想使用ng-if它仍然会抛出每个元素渲染会变慢。

Answer 4

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

JS中的

使用

检查DOM中是否存在ID

if(document.getElementById(value)!==undefined){
return true;
}

这很快。但是你也可以尝试做一个过滤器并编写一个返回布尔值的函数。根据用例，这可能有效，也可能无效。

function valueCheckerFunction(item){
    if(item==='xx'){
        return item;
    }
}
    return if(vm.displayDNAList.filter(valuecheckerFunction));

Answer 5

我建议你创建一个你想要单独显示并在该数组上渲染的元素数组。

，而不是使用限制或过滤，因为它会使你的dom唯一不可见。

mainArray= [2000 element];
createAnArray = [25elements]

根据事件

更改createAnArray变量