Question

我有一个带有自举旋转木马的网站，每张幻灯片都显示4张照片。

<div id="myCarousel" class="carousel slide">


    <div class="carousel-inner">
        <div class="item active">
            <div class="row">
                <div class="col-sm-3"><a href="#x"><img src="images/restaurants/kababji.jpg" alt="Image" class="img-responsive"><Br><center>Kababji</center></a>
                </div>
                <div class="col-sm-3"><a href="#x"><img src="images/restaurants/alsaniour.jpg" alt="Image" class="img-responsive"><Br><center>Al Saniour</center></a>
                </div>
                <div class="col-sm-3"><a href="#x"><img src="images/restaurants/pizzahut.jpg" alt="Image" class="img-responsive"><Br><center>Pizza Hut</center></a>
                </div>
                <div class="col-sm-3"><a href="#x"><img src="images/restaurants/tabliyetmassaad.jpg" alt="Image" class="img-responsive"><Br><center>Tabiliyet Massaad</center></a>
                </div>
            </div>

        </div>

        <div class="item">
        <div class="row">
                <div class="col-sm-3"><a href="#x"><img src="images/restaurants/burgerking.png" alt="Image" class="img-responsive"><Br><center>Burger King</center></a>
                </div>
                <div class="col-sm-3"><a href="#x"><img src="images/restaurants/malektaouk.jpg" alt="Image" class="img-responsive"><Br><center>Malek Taouk</center></a>
                </div>
                <div class="col-sm-3"><a href="#x"><img src="images/restaurants/pizzahut.jpg" alt="Image" class="img-responsive"><Br><center>Pizza Hut</center></a>
                </div>
                <div class="col-sm-3"><a href="#x"><img src="images/restaurants/tabliyetmassaad.jpg" alt="Image" class="img-responsive"><Br><center>Tabiliyet Massaad</center></a>
                </div>
            </div>

        </div>

    </div>

我想使用angularjs从数据库中获取照片。项目上的ng-repeat将解决问题，但它将获得50张照片。如何在每张幻灯片中放置每4张/ 50张照片。有什么帮助吗？

Answer 1

您可以使用groupBy过滤器，还应该为图片添加帮助属性：index: Math.floor(i / 4)。

＆＃13;

angular.module('app', ['angular.filter'])
.controller('MyController', ['$scope', function($scope) {
    $scope.images = [];
    for(var i = 0; i < 50; i++)
      $scope.images.push({url:'url' + i, index: Math.floor(i / 4)});
}]);

＆＃13;

<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.16/angular-filter.js"></script>

<body ng-app="app">
  <div ng-controller="MyController">  
    <div class="carousel-inner">
      <div class="item" ng-class='{active: $first}' ng-repeat="(key, value) in images | groupBy: 'index'">
        <div class="row">
            <div class="col-sm-3" ng-repeat="image in value">
              {{image.url}}
            </div>
        </div>
        <br/>
      </div>            
    </div>            
  </div>
</body>

＆＃13;

Bootstrap轮播 - ng-repeat限制

1 个答案: