javascript - Angular UI Bootstrap Slider 每张幻灯片多个项目

Question

我正在连接到 Web 服务，并希望为每张幻灯片填充 4 个项目的 UI Bootstrap 轮播。我正在使用 | limitTo:4，但我需要一种方法来限制总共 10 张幻灯片中的每张幻灯片 4 张。

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

app.controller("eventsController", function($scope, $http) {

    var events = $http.get('/events');

    events.success(function(data) {

        $scope.eventData = data.events["event"];
        console.log($scope.eventData);

    });

});

使用 ng-repeat 过滤器可能缺少一个简单的解决方案。非常感谢您的帮助。

更新:我不考虑响应性，但稍后需要(敏捷冲刺)。仍然围绕循环中的 += 思考，但它运行良好。我想我从第 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>

Answer 1

我尝试了这个以某种方式响应式设计以根据屏幕分辨率呈现不同数量的项目。

http://plnkr.co/edit/QhBQpG2nCAnfsb9mpTvj?p=preview