I've recently started to use AngularJS on my projects and I've come across a big problem using ngRepeat to load thumbnails from a dynamic array into a DIV.
Since I won't be explaining the entire application here, I'll reproduce an isolated situation where the problem occurs.
Let's suppose I have an image tag with ngRepeat directive like this:
<img ng-repeat='n in [] | range: explorer.loadedLog.screenshotsNum' ng-src='getss.php?degenerated={{explorer.selectedLog}}&index={{n+1}}'>
Assuming that range is a custom filter that generates an array with explorer.loadedLog.screenshotsNum(variable modified by AJAX requests) elements and explorer.selectedLog is a string modified by AJAX requests. I feel like these informations are almost irrelevant cause a tested it with common dynamic arrays and came across the same problem.
The point is: when explorer.loadedLog.screenshotsNum and explorer.selectedLog are changed, all the new images have to be loaded.
I have a button for changing these values. When I first click it(at the first loading), it goes okay. If I wait for all the images to be loaded and change these values again, the new images are still loaded with no problems. But if I change it and change it again BEFORE all the images were loaded, it will load ALL the images that were left and then start loading the images that currently have to be loaded.
I mean, I don't know if I clearly explained this, but I thought if I modified these vars, the "old" images would just stop being loaded. But, somehow, they are still being loaded in background like the DOM from those were still somewhere in the document, and the "new" images' loading gets delayed. I actually wanted to stop the "old" images from being loaded and start loading the "new" images. I think it has to do with the way ngRepeat works, but I really wonder if there's no way to get through this without changing too much.
If I could solve this problem, the ngRepeat choice would be the best for me. But I still accept any other suggestion.
EDIT:
I've just noticed the obvious: when you set "src", it will make the request to the server and it won't stop even if you remove/change img src, so it has nothing to do with the way ngRepeat works but actually with the way <img> works. So, for my needs, window.stop() did the job(because my application doesn't have any restrictions to this), but I still wonder how I could make things work if I had any other images loading on the page simultaneously, since I couldn't simply call window.stop(). There is a way I can prevent an <img> from loading, so I could iterate over all the <img> elements inside a container and prevent them from loading one-by-one?
