How to decrease ng-repeat renderig time, limitTo?

Hello,

My goal to render list of items as quick as posable.

I have pretty complicated list of items and I can’t use collection-repeat.

The list size about 30-50 items and what I do today is load 1st 6 items and after 500 milliseconds load other stuff by using limitTo.

However there is several disadvantages like:

  • scrolling stuck for more then 2 seconds if I try to scroll immediately after render done (after 500 mill).
  • after route to sub view and turn back, scroll always returns to the top of the list (no history)

This is my snippets of code:

<div class="list">         
<a 
         bindonce
         class="item wm-group-item" 
         ng-repeat="group in getGroupList()  | limitTo : groupListSize" 
         on-finish-render="renderDone" ng-cloak"
         
            bo-href="blablabla" >
            <div class="row" >
                <div class="col col-20" >
                    <wm-group-item-left group="group"></wm-group-item-left>
                </div>
                <div class="col wm-col-65" >
                    <wm-group-item-center group="group"></wm-group-item-center>                    
                </div>    
                <div class="col wm-col-15" >
                    <wm-group-item-right group="group" ></wm-group-item-right> 
                </div> 
            </div>           
        </a>
</div>

controller

 $scope.$on('renderDone', function(ngRepeatFinishedEvent) {
       $timeout(function() {
                $scope.groupListSize = 99999;
                    },500);                    
    });

Is there more elegant way to show up 1st part of list and after delay load absent items?

Thanks,

do you mean collection-repeat with ng-collection?

and why cant you use it? because of different height?

you are right, i mean collection-repeat. All items have the same height. collection-repeat is not my case because I have max 60 items (not 1K). And rendering during the scroll i feel jerkiness.

Thanks,

I would first move the function getGroupList() out of the ng-repeat statement.

Execute the function once and assign it to a $scope variable

getGroupList() returns list of items with filtering. How does it help?

Did anyone come with a solution to that rendering time problem?