Question

我一直试图使角度旋转木马工作，但我目前卡住了。我是角度的新手，因此我不能让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"
    }
];

这只显示第一张图片，因为它不能＆＃34;渲染＆＃34; - 预订[$ index +1] .img如何为这种情况获取下一个索引项目？

工作插件：http://plnkr.co/edit/VcD8tKOtfQGuOgt4tO08

Answer 1

我经历了你提供的那个，我满足你的要求。我认为你犯的错误是循环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。

角度多项旋转木马

1 个答案: