表示時にのみレンダリングするアイテム

Question

私は大きなテーブルを持っています。約500個のカラムがあり、合計で約25000ピクセルです。 そして、一度にすべてをレンダリングするのはあまり良いことではありません。

しかし、画面上に表示される表の一部（約1200ピクセル幅のセクション）のみをレンダリングする方法はありません。 （私の画面では、他の人の画面に依存します）。

は、ここで私が持っているいくつかのコード

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

だけのアイデアは何とか各tdにng-ifを装着されていますが、それはむしろ悪いアイデアのように思えます。

だから、他の誰かが助言を得たいと思っています。

あなたはexemple AngularUI paginationディレクティブのために使用することができ、結果

をページ分割：あなたは多くのデータをオーバーNG-繰り返したときのパフォーマンスを改善しようとしている場合

Answer 1

は、2つの一般的な解決策があります。 Angularアプリでの使用方法については、this questionを参照してください。

は、パフォーマンスの面ではあまり良いだろうlimitToフィルタ

このソリューションを使用して、より良い（サーバー・サイドを編集する必要はありません）あなたのニーズに適合させることができます。スコープ変数にlimit値を移動させることができる

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

注

limitToを使用すると、（以下の実施例50に）ng-repeatによって表示される線の量を制限できるようにコア角度指令であります。

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>

：あなたが表示したい項目の数を更新するために、それを変更することができます