CODEWITHSUNDEEP
htmlangularjs
Kate Cebotari
Kate Cebotari

Reputation: 309

AngularJS + bootstrap carousel help to display all the images

I have an array of objects, where I have the url of the image. I need to display these images in carousel:

<div class="item active">
    <div class="row cst-carouselImg">
        <div class="col-sm-3 col-xs-6" ng-repeat="image in pack.hotels.current.hotelImages | limitTo:'4'">
            <a href="#"><img
                         ng-src="<?php
                         echo 'http://photos.hotelbeds.com/giata/';
                         ?>{{image.path}}"
                         alt="Image" class="img-responsive"></a>
        </div>
    </div>
</div>

At this point I have only the first 4 pictures from the array. Next I display the next 4 images from the array:

<div class="item">
     <div class="row cst-carouselImg">
         <div class="col-sm-3 col-xs-6" ng-repeat="image in pack.hotels.current.hotelImages" ng-if="$index > 3 && $index <8">
             <a href="#"><img
                         ng-src="<?php echo 
                         'http://photos.hotelbeds.com/giata/';
                         ?>{{image.path}}"
                         alt="Image" class="img-responsive"></a>
         </div>
    </div>
</div>

How can I display all the images using ng-repeat instead of manually adding <div class="item"> and setting manually $index?

Upvotes: 1

Views: 435

Answers (2)

Andrew Adam
Andrew Adam

Reputation: 1582

If I understood you correctly you are aiming at having a nested ng-repeat, one for the items and one for the images. Let me know if I misunderstood you or you need some clarifications. Please see this snippet below:

var app = angular.module("app", []);

app.controller('exampleCtrl', function($scope){
  $scope.hotels= [
    [
      {
        path: "hotel1 path1",
        otherprop: true
      },
      {
        path: "hotel1 path2",
        otherprop: false
      },
      {
        path: "hotel1 path3",
        otherprop: true
      }
    ],
    [
      {
        path: "hotel2 path1",
        otherprop: true
      },
      {
        path: "hotel2 path2",
        otherprop: true
      }
    ],
    [
      {
        path: "hotel3 path1",
        otherprop: false
      },
      {
        path: "hotel3 path2",
        otherprop: false
      },
      {
        path: "hotel3 path3",
        otherprop: false
      },
      {
        path: "hotel3 path4",
        otherprop: true
      }
    ]
  ];
    
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="exampleCtrl">
    <div class="item" ng-repeat="hotel in hotels">
      <p>This is Hotel #{{$index+1}}</p>
         <div class="row cst-carouselImg">
             <div class="col-sm-3 col-xs-6" ng-repeat="image in hotel">
                 <a href="#">
                   <img ng-src="{{image.path}}" class="img-responsive" alt="(this is alt text)"/>
                   Image {{$index+1}}'s path: {{image.path}}
                 </a>
             </div>
        </div>
    </div>    
  </div>
</div>

Upvotes: 1

jitender
jitender

Reputation: 10429

Here i take some sample array you can modify it accordingly

var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope, $timeout) {
$scope.hotelImages=[{id:1},{id:2},{id:3},{id:4},{id:5},{id:6},{id:7}];
$scope.loopCount=Math.ceil($scope.hotelImages.length/4);
$scope.getNumber = function(num) {
    var arr=[];
    for(i=0;i<num;i++){
    arr.push(i);
    }
    return arr;   
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div  ng-app="myApp" ng-controller="MyCtrl">

<div class="item" ng-repeat="i in getNumber(loopCount) track by $index">
Carousel :-{{i}}
     <div class="row cst-carouselImg">
    
         <div class="col-sm-3 col-xs-6" ng-repeat="image in hotelImages" ng-if="$index >=(i*4) && $index <(i*4)+4"  >
            image:- {{image.id}}
         </div>
    </div>
</div>
</div>

Upvotes: 2

Related Questions