Javascript 使用AngularJS循环元素

我已经使用AngularJS创建了一个幻灯片应用程序，它使用Instagram照片，并通过特定标签进行过滤。这是和的

根据AngularJS的原理，在这些图像中循环的最有效方式是什么？

目前，我使用了一个

$timeout

，它将第一个元素移动到

images

数组的底部，同时使用CSS隐藏除第一个图像以外的所有其他图像：

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

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

演示：

---

另一个选项是遍历

photos

对象并应用

活动类，如。这会减少资源密集度吗？
您的解决方案工作正常，但使用中继器可能不是最佳策略，因为：


所有图像都将始终在DOM中
使用中继器并操纵数组将导致中继器重新计算和DOM改组

因此，对于更大的幻灯片，DOM中有许多元素，并且DOM操作频繁/缓慢。我可以提出另一种方法：

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

然后在模板中：

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


​

这是一个JSIDLE:
谢谢你的建议，Pawel！这是一个非常好的观点。最后，我使用了ng repeat，并仅切换了
active
ng类，这似乎大大减少了内存使用量，并仅触发了使用
active
切换的列表元素的重新绘制。