Bootstrap Carousel 的 Angular 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">

我尝试做一些类似于 bluescreen 对 Filter results 6 through 10 of 100 with ng-repeat in AngularJS 的回答的事情，我有两个 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>

Plunker