CODEWITHSUNDEEP
angularjshtml
Elio Chamy
Elio Chamy

Reputation: 269

Bootstrap carousel - ng-repeat limit

I have a website with a bootstrap carousel, showing 4 photos in every slide.

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

I want to get the photos from database using angularjs. ng-repeat on item will fix the problem, but it will get 50 photos. How can i put every 4 photos/50 in every slide. Any help?

Upvotes: 0

Views: 422

Answers (1)

Slava Utesinov
Slava Utesinov

Reputation: 13488

You can use groupBy filter, also you should add helper property: index: Math.floor(i / 4) to your images.

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>

Upvotes: 1

Related Questions