Angular 多项目轮播

Question

我一直在尝试使 angular 轮播正常工作，但我目前卡住了。我是 angular 的新手，因此我不能让 ng-repeat 也正确工作。

我做了什么：

 <div id="slides_control">
<div>
  <carousel interval="3000">
    <slide ng-repeat="book in bookslider" active="book.active">
      <div class="col-md-3"><img ng-src="{{book.img}}"></div>
      <div class="col-md-3"><img ng-src="{{book[$index +1].img}}"></div>
      <div class="col-md-3"><img ng-src="{{book[$index +2].img}}"></div>
      <div class="col-md-3"><img ng-src="{{book[$index +3].img}}"></div>
      <div class="carousel-caption">
        <h4>Slide {{$index+1}}</h4>
      </div>
    </slide>
  </carousel>
</div>

 $scope.bookslider = [

    {

        img: "images/headerslider/5.jpg"
    },
    {

        img: "images/headerslider/4.jpg"
    },
    {

        img: "images/headerslider/2.jpg"
    },
    {
        img: "images/headerslider/3.jpg"
    }
];

这只显示第一张图片，因为它不能 "render" - book[$index +1].img
在这种情况下，如何获取下一个索引项？

工作经验：http://plnkr.co/edit/VcD8tKOtfQGuOgt4tO08

Answer 1

我查看了你提供的plunker，我明白你的要求。我认为您犯的错误是循环 bookslider 对象的地方。您需要遍历 bookslider 对象，而不是遍历 book 对象，后者实际上是 bookslider 数组的一个单独对象。

您只需像这样更改轮播对象即可解决问题。

<carousel interval="3000">
    <slide ng-repeat="book in bookslider track by $index" active="book.active">
        <div class="col-md-3"><img ng-src="{{bookslider[($index) %4 ].img}}" style="width=100px"></div>
        <div class="col-md-3"><img ng-src="{{bookslider[($index+1) % 4].img}}"></div>
        <div class="col-md-3"><img ng-src="{{bookslider[($index+2) % 4].img}}"></div>
        <div class="col-md-3"><img ng-src="{{bookslider[($index+3) % 4].img}}"></div>
        <div class="carousel-caption">
            <h4>Slide {{$index+1}}</h4>
        </div>
    </slide>
</carousel>

我附上了工作插件here。

Angular 多项目轮播

Angular Multi-item carousel

angularjs

angular-ui-bootstrap