使用AngularJS循环遍历元素

时间:2012-11-26 11:04:06

标签: javascript angularjs

我使用AngularJS创建了一个幻灯片应用程序,该应用程序使用按特定标记过滤的Instagram照片。这是demoGitHub repo

根据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 );
);

演示http://jsfiddle.net/YruT6/1/

另一种选择是走photos个对象并应用active类,如illustrated here。这会减少资源密集吗?

1 个答案:

答案 0 :(得分:5)

您的解决方案运行正常,但使用转发器可能不是最佳策略:

  • 所有图片将始终在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>​

这是一个jsFiddle:http://jsfiddle.net/ThmeZ/6/