[英]angularjs , a is undefined in foreach, looping through elements with class
[英]Looping through elements with AngularJS
我使用AngularJS创建了一个幻灯片应用程序,该应用程序使用按特定标签过滤的Instagram照片。 这是演示和GitHub存储库 。
根据AngularJS的原理,遍历这些图像的最有效方法是什么?
目前,我使用$timeout
结合CSS将第一个元素移动到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
类,如此处所示 。 这样会减少资源消耗吗?
您的解决方案可以正常工作,但使用中继器可能不是最佳策略,因为:
因此,对于更大的幻灯片,您将在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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.