Bootstrap輪播 - ng-repeat極限

我有一個帶有bootstrap輪播的網站，每張幻燈片都顯示4張照片。Bootstrap輪播 - ng-repeat極限

<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放在每張幻燈片中。任何幫助？

來源

2017-06-01 Elio Chamy

中的第一項爲項目活性，其餘爲項目。我無法單獨使用ng-repeat項目或單獨使用項目，它會使轉盤崩潰。任何想法？ –

您可以使用groupBy過濾器，也應該爲圖像添加幫手屬性：index: Math.floor(i/4)。

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)}); 
 
}]);

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

來源

2017-06-01 06:51:16

Bootstrap輪播 - ng-repeat極限

回答

相關問題