Я подключаюсь к веб-сервису и хочу заполнить карусель UT Bootstrap с 4 элементами для каждого слайда. Я использую | limitTo: 4, но мне нужен способ ограничить 4 на слайд из 10.Угловой пользовательский пользовательский бутстрап-слайдер Несколько элементов на слайд
Вот 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>
<!-- {{event.}} -->
</div>
</div>
</div>
</slide>
</carousel>
</div>
</div>
контроллер для справки
app.controller("eventsController", function($scope, $http) {
var events = $http.get('/events');
events.success(function(data) {
$scope.eventData = data.events["event"];
console.log($scope.eventData);
});
});
Существует, вероятно, простое решение, что Im не хватает, используя нг повтора фильтра. Спасибо вам за помощь.
ОБНОВЛЕНИЕ: Я не считаю отзывчивым, но вам нужно будет в более позднее время (гибкий спринт). Все еще обнимаю мой разум вокруг + = в цикле, но он хорошо работает. Я думаю, что я начинаю с 4-го пункта и поднимаюсь оттуда ... Еще раз спасибо за вашу помощь.
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>
"Я использую | limitTo: 4, но мне нужен способ ограничить 4 на слайд из 10 всего." Вы имеете в виду, что вам нужно 1-4 на первом, 5-8 на 2-м и так далее? – Blackunknown
@cpk Возможно, вы захотите использовать значение '$ index'' ngRepeat', которое поможет вам определить, в какой позиции вы находитесь в данный момент. Это может указывать на вас в правильном направлении, потому что вы можете сравнить это значение и на основе формата значения вашей HTML-разметки соответственно. – developer10
@ Не знаю, да точно. Спасибо за быстрый ответ. – cpk