只顯示物品時可見

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

如果你想提高性能NG-重複了大量的數據時，常見的有兩種解決方案：

分頁結果

您可以使用爲例的AngularUI pagination指令。另請參閱this question處理如何在Angular應用程序中使用它。

使用limitTo過濾

該解決方案將在性能方面不太好，但是可以更好地適應您的需求（你不會有編輯服務器端）。

limitTo是核心角指令，允許你限制由一個ng-repeat顯示的行的數量（在下面的例子中，50）：

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

請注意，可以將limit值移動到範圍可變。您可以修改它來更新項目的數量要顯示：

var myApp = angular.module('app', []); 
 
myApp.controller('MyCtrl', ['$scope', function($scope) { 
 
    $scope.items = []; 
 
    $scope.limit = 5; // default limit 
 
    
 
    for(let i = 0; i < 100; i++) $scope.items.push(i); // generate data 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="MyCtrl"> 
 
    <ul> 
 
     <li ng-repeat="i in items | limitTo: limit">{{i}}</li> 
 
    </ul> 
 
    <button ng-click="limit = limit + 5">Show more results</button> 
 
</div>