javascript - 'slider angular' 点击小图返回相应的大图

Question

我使用幻灯片放映自网站:http://www.sitepoint.com/creating-slide-show-plugin-angularjs/

添加了小侧面图像。我想知道如何在点击小图时返回相应的大图。

使用此代码添加的缩略图:(放置 templateurl.html)

<ul class="minimage" ng-show="image.visible" >

  <a ng-click="returner()"> <img ng-repeat="image in images" ng-src="/sliderAngular/img/{{image.src}}" width="70" height="56"/> </a>

</ul>

这是我的尝试，因为它可以让它发挥作用吗？(放置app.js)

scope.currentIndex=0;

scope.returner=function(){
   scope.currentIndex= ;

};

我花了几天时间尝试真正需要了解的人的帮助，但没有成功。如果您需要任何更多信息，可以问我，我的英语和 Angular 非常有限。

Answer 1

实际上，您最初共享的代码有很多问题，其中一些是:

• UL标签没有LI项目
• ng-show="image.visible"在 ng-repeat 之外，所以图像总是未定义的
• ng-repeat 在 img 标签上，所以只有一个链接，其中包含大量图片。

使用 $index 的代码示例(在 ng-repeat 指令中可用的属性):

<ul class="minimage" ng-show="images.length"> <!-- show if there are items  -->
    <li ng-repeat="image in images"><a ng-click="returner($index)"><img ng-src="/sliderAngular/img/{{image.src}}" width="70" height="56"/></a></li>
</ul>

和:

scope.currentIndex=-1;
scope.returner = function(index){
    scope.currentIndex = index;
};