Góc giao diện người dùng Bootstrap Thanh trượt Nhiều mục trên mỗi trang trình bày

Question

Tôi đang kết nối với dịch vụ web và muốn điền băng chuyền Bootstrap UI với 4 mục cho mỗi trang trình bày. Tôi đang sử dụng | limitTo: 4, nhưng tôi cần một cách để giới hạn 4 cho mỗi slide trong tổng số 10.

Dưới đây là 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> 

điều khiển để tham khảo

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

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

    events.success(function(data) { 

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

    }); 

}); 

Có lẽ là một giải pháp dễ dàng mà Im mất tích cách sử dụng một bộ lọc ng-repeat. Cảm ơn một loạt sự giúp đỡ.

CẬP NHẬT: Tôi không kế toán cho phản hồi, nhưng sẽ cần đến sau (chạy nước rút nhanh). Vẫn gói tâm trí của tôi xung quanh + = trong vòng lặp, nhưng nó hoạt động tốt. Tôi nghĩ rằng tôi đang bắt đầu từ mục thứ 4 và đi lên từ đó ... Cảm ơn một lần nữa vì sự giúp đỡ của bạn.

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

tôi đã cố gắng này đã được responsively designed trong một số cách để làm cho số lượng khác nhau của các mặt hàng phụ thuộc vào độ phân giải màn hình.

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