Looping through elements with AngularJS

Question

I have created a slideshow app using AngularJS that uses Instagram photos filtered by a specific tag. Here is the demo and the GitHub repo.

What is the most efficient way of looping through those images according to the principles of AngularJS?

Currently I use a $timeout which moves the first element to the bottom of the images array in combination with CSS which hides every other image except the first one:

$scope.images = [
    'image-001.jpg',
    'image-002.jpg',
    'image-003.jpg'
];

$timeout( function advanceSlide() {
    $scope.images.push( $scope.images.shift() );
    $timeout( advanceSlide, 6000 );
);

Demo: http://jsfiddle.net/YruT6/1/

The other option would be to walk the photos object and apply an active class, like illustrated here. Would that be less resource intensive?

pkozlowski.opensource · Accepted Answer · 2012-11-26 11:34:06Z

5

Your solution works OK but using a repeater might not be the best strategy as:

all the images will be in the DOM all the time
using a repeater and manipulating an array will result in a the repeater re-calculation and DOM reshuffle.

So, for a bigger slideshow you would have many elements in the DOM and frequent / slow DOM manipulations. I could propose an alternative approach:

$scope.imgIndex = 0;
$timeout(function advanceSlide() {
    $scope.imgIndex = ($scope.imgIndex + 1) % $scope.images.length; 
    $timeout(advanceSlide, 1000);
});

and then in a template:

<div ng-app ng-controller="slideshow">
    <img ng-src="{{images[imgIndex].src}}">
</div>

Here is a jsFiddle: http://jsfiddle.net/ThmeZ/6/

answered Nov 26, 2012 at 11:34

pkozlowski.opensource

117k60 gold badges329 silver badges286 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kaspars Over a year ago

Thanks for the suggestions, Pawel! That is a really good point. I ended up using ng-repeat and toggling only the active ng-class which seems to have drastically reduced memory usage and trigger re-paint only for the list elements with the active toggle.

Collectives™ on Stack Overflow

Looping through elements with AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related