AngularJS: virtual repeat with row with different heights

Efficient scroll lists like md-virtual-repeat or collection-repeat need to know the height of each item in order to work. That’s because they need to know the scroll position, e.g. to show a scrollbar or to be able to skip frames for quick swipe-down motions. The scroll position itself can only be found if you know both how much has been scrolled (we need the height of elements above) and how much there is left to scroll (we need the height of elements below).

What you can do is use a factory to compute the height of each element before injecting them into the loop. This can be done by creating a container with the same properties as the target container (e.g. CSS classes), appending the newly-loaded elements, compute their height (using element.offsetHeight), and removing the container after.

Be aware that this is quite heavy and will likely cause a small lag spike.

Couple of things you could try to speed it up.

One would be to use something like quick-ng-repeat: https://github.com/allaud/quick-ng-repeat instead of built in angular js ng-repeat

Another would be to use one time binding where ever possible to prevent angular from constantly looking for changes during every digest cycle: https://docs.angularjs.org/guide/expression#one-time-binding

And of course, if it's possible, try using chrome's developer tool profile option to find out which of the functions are slowing the application down ; )

PS: Might be worth checking out this thread to see how reverse infinite scrolling could be implemented: Implementing a reverse infinite scroll using ngInfiniteScroll directive in AngularJS

Have you taken a look at React.js as a solution? It uses a virtual DOM which makes updating long lists more efficient.

There is an open-source repo on GitHub that mixes Angular and React, called ngReact.

overview:http://ngreact.github.io/ngReact/

docs:http://ngreact.github.io/ngReact/docs/ngReact.html

repo:https://github.com/ngReact/ngReact

Hope this helps.