Using Angular + ng-animate to animate the list in a circular fashion

Question

Unfortunately I'm posting this from mobile so I don't have the actual code in front of me.

However, here is the problem I'm having in a nutshell. I have a basic Angular controller with an array attached to scope with names of image files. In my HTML I am using ng-repeat with a filter: limitTo to display 9 images using the file names from the array. This works OK. What I am trying to achieve is the ability to scroll the list using forward and back buttons. Also I want infinite scroll through the images. I was able to achieve this by applying

$scope.images.push ($scope.images.shift());

To the array. This seems to work OK so far. However I cannot seem to figure out the ng-animate even after googling the problem and checking the documentation 10 times. What I want is for the list of images to smoothly scroll left or right. None of the CSS classes of ng-animate seem to work right only the ng-enter seems to work on the very first image. When I get rid of the filter on ng-repeat the ng-move seems to work on all but the first and the last image. So right now all I can do is either animate all but the first and last and lose the ability to filter images OR animate only the first and last with the ability to filter.

Is there something obvious that I'm missing here?

Answer 1

Wow after this much searching and extensively refining my google search stumbled upon this answer: How can I animate the movement of remaining ng-repeat items when one is removed? Seems to solve most of my problem. I'm not sure why this works but it does!