Lazy loading elements in ngRepeat collection in AngularJS

Question

How to handle large ng-repeat collections in AngularJS?

I am thinking about canceling the boot process after the user decides to switch to another controller.

To display images, I use:

 <ul class="thumbnails"> <li ng-repeat="photo in photosFound.data track by $index" > <a prettyp class="thumbnail" ng-href="{{domain}}/{{photo.thumb}}" rel="prettyPhoto[main]"> <img class="group1" ng-src="{{domain}}/{{photo.image}}" /> </a> </li> </ul> 

Is there a way to cancel the download of all 150 images after the user decides to change the controller in which they are located?

Answer 1

You can use something like a ui scroller ( https://github.com/angular-ui/ui-scroll ), which will de-visualize anything outside the scrollable viewport ... this will help you with really big datasets in ng-repeat.

Regarding your second question: you can cancel open $ http requests using the promise. This guy describes very well how you do it. http://odetocode.com/blogs/scott/archive/2014/04/24/canceling-http-requests-in-angularjs.aspx