twitter-bootstrap Angular UI Bootstrap Slider 每张幻灯片多个项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26219485/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular UI Bootstrap Slider Multiple items per slide
提问by cpk
I am connecting to a web service and want to populate A UI Bootstrap carousel with 4 items for each slide. I am using | limitTo:4, but I need a way to limit 4 per slide out of the 10 total.
我正在连接到 Web 服务，并希望为每张幻灯片填充 4 个项目的 UI Bootstrap 轮播。我正在使用 | limitTo:4，但我需要一种方法来限制 10 张幻灯片中的每张幻灯片 4 张。
Here is the HTML
这是 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>
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);
});
});
There is probably an easy solution that Im missing using a ng-repeat filter. Thanks a bunch for the help.
使用 ng-repeat 过滤器可能缺少一个简单的解决方案。感谢一堆人的帮助。
UPDATE: I am not accounting for responsive, but will need to at a later time(agile sprint). Still wrapping my mind around the += in the loop, but its working well. I think I am starting on the 4th item and going up from there... Thanks again for your help.
更新：我不考虑响应性，但稍后需要（敏捷冲刺）。我仍然在思考循环中的 +=，但它运行良好。我想我是从第 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:
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>
采纳答案by Giannis Grivas
I tried this one that has been responsively designedin some way to render different number of items depending on screen resolution.
我尝试了这个，它responsively designed以某种方式根据屏幕分辨率呈现不同数量的项目。
http://plnkr.co/edit/QhBQpG2nCAnfsb9mpTvj?p=preview
http://plnkr.co/edit/QhBQpG2nCANfsb9mpTvj?p=preview
