How to render a big number of datasets in angularJS?

Question

How to render a big number of datasets in angularJS?

I have an AngularJS Singplepageapp. Now I want to display a big number of datasets (it should work fine with 50.000 datasets):

<ul>
    <li ng-repeat="node in data">
        <a ng-if="node.children == false" class="lastitem" ng-click="set(node.nodeID)" ng-class="{active: node.nodeID == selectedID}">
            <span>{{node.Name}}</span>
        </a>
    </li>
</ul>

Even this simple template (it should be more complex late) takes the browser (Firefox) ~ 45 seconds to render. Also the browser freezes for that timespan.

Is there any way to display this large amout of data without it taking forever?

Thank you very much!

javascript
angularjs
performance
browser

Answer 1

You can partially load data lets say a 1000 and when a user scrolls to more that 1000 fetch 1000 more and append them to your view.

Use something like:

.directive("loadMoreData", [function() {
    return {
        restrict: 'ACE',
        link: function($scope, element, attrs, ctrl) {
            var raw = element[0];
            element.scroll(function() {
                if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight){
                    $scope.$apply("loadMoreData()");
                }
            });
        }
    };

}])

Source