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">

我尝试过类似于蓝调的答案Filter results 6 through 10 of 100 with ng-repeat in AngularJS，我有两个限制，但它也没有。

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

我在做什么有问题吗？这甚至可以用ui-bootstrap的旋转木马吗？

===== UPDATE =====

我尝试修改我的代码，看看@ 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

Bootstrap Carousel的Angular ng-repeat

1 个答案: