Bootstrap Carousel的角度ng-repeat

Question

我遇到一個問題，我的輪播會根據列表顯示正確數量的uib-slides （每頁3個項目，因此如果總共7個項目則有3頁3/3/1），而不是正確的3/3 / 1它在每頁7/7/7上顯示所有7個項目。

的HTML

<div uib-carousel active="active" class="carousel-inner" role="listbox">
    <div uib-slide ng-repeat="slide in testCtrl.carouselSlides track by $index" index="$index" ng-class="{active : $first}">
        <div ng-repeat="fav in testCtrl.carouselList">
            <div class="col-sm-4" ng-repeat="f in fav">
                <widget-chart="widget" style="margin:auto;"></widget-chart>
            </div>
        </div>
    </div>
</div>

carouselSlides只是一個空數組，計算該數組可以顯示需要多少頁。 因此，如果有8個項目，則需要3頁（3/3/2），因此carouselSlides等於[ , , ]

carouselList是數據，其格式類似於

carouselList = [
    [a, b, c],
    [d, f, g],
    [h, i, j],
    [k, l]
];

但可以是任意長度，只要將其放入3個數組即可。

我嘗試添加一個limitTo但似乎沒有任何效果。

<div class="col-sm-4" ng-repeat="f in fav | limitTo:3">

我在AngularJS中嘗試了類似於bluescreen對ng-repeat過濾結果6到10的結果的回答10，其中我有兩個limitTo，但也沒有用。

<div class="col-sm-4" ng-repeat="f in fav | limitTo:6 | limitTo:-3" >

我的工作有問題嗎？ 使用ui-bootstrap的輪播是否有可能？

---

=====更新=====

我嘗試修改我的代碼以查看@NTP的解決方案是否有效。 這是我的嘗試。

我重新格式化了carouselList的數據，看起來像

carouselList = [a, b, c, d, f, g h, i, j, k, l];

並將我的HTML更改為

<div uib-carousel active="active" class="carousel-inner" role="listbox">
    <div uib-slide ng-repeat="slide in testCtrl.carouselSlides track by $index" index="testCtrl.carouselList[$index]">
        <div class="col-sm-4">
            <widget-chart="testCtrl.carouselList[$index * 3]" style="margin:auto;"></widget-chart>
        </div>
        <div class="col-sm-4" ng-if="testCtrl.carouselList[$index * 3 + 1] != undefined">
            <widget-chart="testCtrl.carouselList[$index * 3 + 1]" style="margin:auto;"></widget-chart>
        </div>
        <div class="col-sm-4" ng-if="testCtrl.carouselList[$index * 3 + 2] != undefined">
            <widget-chart="testCtrl.carouselList[$index * 3 + 2]" style="margin:auto;"></widget-chart>
        </div>
    </div>
</div>

但是，這沒有用。

注意：我不確定這是否重要，但是我不是在重復圖像，而是在重復我擁有的小部件面板對象。

Answer 1

首先計算ng-repeat的迭代次數

  $scope.getNumber = function() {
    if($scope.slides.length % 3 == 0)
      return new Array($scope.slides.length / 3);
    else
      return new Array(Math.floor($scope.slides.length/3) + 1);   
  }

然后使用以下代碼顯示每張幻燈片3個項目

<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
  <div uib-slide ng-repeat="slide in getNumber() track by $index" index="slides[$index].id">
    <img ng-src="{{slides[$index * 3].image}}" style="width:33%">
    <img ng-show="slides[$index * 3 + 1] != undefined" ng-src="{{slides[$index * 3 + 1].image}}" style="width:33%">
    <img ng-show="slides[$index * 3 + 2] != undefined" ng-src="{{slides[$index * 3 + 2].image}}" style="width:33%">
  </div>
</div>

柱塞