分隔结果

Question

我有一张大桌子，大约500列，总共大约25000像素。而且一次性渲染它并不是很好。

但我没有想法如何只渲染屏幕上可见的表格部分，这是一个大约1200px宽的部分。（在我的屏幕上，取决于其他人的屏幕）。

这是一些代码

<tr ng-repeat="shift in ctrl.items">
    <td ng-repeat="col in ctrl.calculateNumberOfColumns() track by $index"></td>
</tr>

我只有想法会以某种方式将ng-if附加到每个td，但这似乎是一个相当糟糕的主意。

所以我希望其他人有任何建议。

Answer 1

如果您在重复大量数据时尝试提高性能，则有两种常见的解决方案：

分隔结果

例如，您可以使用AngularUI pagination指令。另请参阅this question，了解如何在Angular应用程序中使用它。

使用`colid hstore ----------------------------------------------- 4 "20173"=>"890" 5 "20172"=>"1000" 8 "20172"=>"90" 1 "20171,20171,20171,20173,20173,20173,20172,20172,20172,20172,20172,20172"=>"500,50,238,500,50,238,500,50,238,500,50,238" 2 "20173,20173,20174,20174"=>"78,523,78,523" 3 "20174"=>"990" 7 "20172"=>"780"`过滤器

此解决方案在性能方面不太好，但可能更适合您的需求（您不必编辑服务器端）。

limitTo是一个核心Angular指令，允许您限制var table = $('#example').DataTable(); // #column3_search is a <input type="text"> element $('#column3_search').on( 'keyup', function () { table .columns( 3 ) .search( this.value ) .draw(); } );显示的行数（在以下示例中为50）：

limitTo

请注意，您可以将ng-repeat值移动到范围变量。您可以对其进行修改以更新要显示的项目数：

<tr ng-repeat="item in items | limitTo: 50">{{item}}</tr>

limit

仅在可见时呈现项目

1 个答案:

分隔结果