用angularjs隐藏表格列的最有效方法

Question

我想知道是否有人知道一种更有效的方式来显示/隐藏由angularjs驱动的表中的列：

我有一个大表（20列以上，1000000 +行），并实现了一项功能，可根据用户偏好显示/隐藏列。 我通过ng-if在每个表格单元格上执行此操作。 这会触发大量的观察者对表格的初始负载计数，并且角度摘要周期正在疯狂，单个页面上的观察者超过4000。

解决性能问题的主要想法是减少观察者人数。 为此，我使用此库， 该库不执行其他任何操作，然后禁用不在视口中的观察者。 到目前为止，性能还不错，但是如果我要在表中添加越来越多的功能该怎么办？ 看起来，此“显示/隐藏列”功能将永远是我的性能瓶颈（并且根据chromes angularJS摘要计时分析确实如此）。

结论：ng-if看起来不是显示/隐藏列的好方法，因为观察者数量多且性能差。 有谁知道显示/隐藏列的更明智的解决方案？

编辑：我已经有每页200行的分页，但是问题仍然存在，当然我的目标是可扩展的解决方案。

Answer 1

您可以尝试将CS​​S类应用于具有不同类名的所有表单元格和相应的标头单元格。

EG：第1列，第2列等

在角形字符串中定义类定义，并在样式标签之间放置表达式

例如：

在控制器js中

$scope.columnStyleDefs = '.column-1{display:none},.column-1{display:table-cell},...';

用户更改偏好时，可以根据需要更改“ columnStyleDefs”

在html模板中

<style>
{{columnStyleDefs}}
</style>

我回家可以为您完成上述任务。