Only render items when visible

Question

I've got a big table, about 500 columns, which is about 25000 pixels wide total. And it's not very good to render it all at once.

But I have zero to none ideas how to only render the part of the table that is visible on the screen, which is a section that is about 1200px wide. (On my screen, depends on other people's screens).

Here's some code

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

Only idea I have is somehow attaching ng-if to each td, but that seems like a rather bad idea.

So I'm hoping someone else has any advice.

Answer 1

If you are trying to improve performances when ng-repeating over a lot of data, there are two common solutions:

Paginate the result

You can use for exemple the AngularUI pagination directive. See also this question dealing with how to use it on an Angular app.

Use the limitTo filter

This solution will be less good in terms of performance, but may be better adapted to your needs (you won't have to edit server side).

limitTo is a core Angular directive that allow you limit the amount of lines displayed by a ng-repeat (in the following example, 50):

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

Note that you can move the limit value to a scope variable. You can modify it to update the number of items you want to display:

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>