I am connecting to a web service and want to fill in a Bootstrap UI carousel with 4 elements for each slide. I use | limitTo: 4, but I need a way to limit 4 to a slide of 10.
Here is the HTML
<div class="row event-slider" ng-controller="eventsController"> <div ng-controller="sliderController"> <carousel interval="interval" class="col-sm-12"> <slide class="col-sm-12"> <div class="col-sm-3 event" ng-repeat="event in eventData | limitTo:4"> <div class="event-inner"> <img ng-src="{{event.image.block250.url}}"> <div class="event-details"> <h4 class="uppercase">{{event.title}}</h4> </div> </div> </div> </slide> </carousel> </div> </div>
Controller for reference
app.controller("eventsController", function($scope, $http) { var events = $http.get('/events'); events.success(function(data) { $scope.eventData = data.events["event"]; console.log($scope.eventData); }); });
Perhaps this is a simple solution that Im disappears using the ng-repeat filter. Thank you for your help.
UPDATE: I do not consider responsiveness, but you will need it at a later time (flexible sprint). Still hugging my mind around + = in the loop, but it works well. I think that I start from point 4 and get up from there ... Thanks again for your help.
var events = $http.get('/events'); var i; events.success(function(data) { $scope.eventData = data.events["event"]; $scope.slideGroup = []; for (i = 0; i < $scope.eventData.length; i += 4) { slides = { 'first' : $scope.eventData[i], 'second' : $scope.eventData[i + 1], 'third' : $scope.eventData[i + 2], 'fourth' : $scope.eventData[i + 3] }; console.log($scope.slideGroup); $scope.slideGroup.push(slides); } });
HTML:
<carousel interval="interval" class="col-sm-12"> <slide class="col-sm-12" ng-repeat="event in slideGroup"> <div class="col-sm-3 event"> <div class="event-inner"> <img ng-src="{{event.first.image.url}}"> <div class="event-details"> <h4 class="uppercase">{{event.first.title}}</h4> </div> </div> </div> <div class="col-sm-3 event"> <div class="event-inner"> <img ng-src="{{event.second.image.url}}"> <div class="event-details"> <h4 class="uppercase">{{event.second.title}}</h4> </div> </div> </div> <div class="col-sm-3 event"> <div class="event-inner"> <img ng-src="{{event.third.image.url}}"> <div class="event-details"> <h4 class="uppercase">{{event.third.title}}</h4> </div> </div> </div> <div class="col-sm-3 event"> <div class="event-inner"> <img ng-src="{{event.fourth.image.url}}"> <div class="event-details"> <h4 class="uppercase">{{event.fourth.title}}</h4> </div> </div> </div> </slide> </carousel>
source share