Köşeli UI Önyükleme Kaydırıcısı Her bir slayt için birden çok öğe

Question

Bir web hizmetine bağlanıyorum ve her bir slayt için bir UI Önyükleme karuseli 4 öğeyle doldurmak istiyorum. Kullanıyorum | limitTo: 4, ama toplam 10 üzerinden slayt başına 4 sınırlamak için bir yol ihtiyacım var.

İşte Im bir ng-repeat filtre kullanarak eksik kolay bir çözüm muhtemelen yoktur referans

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

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

    events.success(function(data) { 

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

    }); 

}); 

için 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> 

Kontrolör olduğunu. Yardım için bir demet teşekkür ederim.

GÜNCELLEME: Duyarlı olmayı hesaba katmam ama daha sonraki bir zamanda (çevik sprint) gerekecek. Hala aklımı + = döngüde sarmak ama iyi çalışıyor. Sanırım 4. maddeden başlıyorum ve oradan çıkıyorum ... Yardımlarınız için tekrar teşekkürler.

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

ben ekran çözünürlüğüne bağlı öğelerin farklı sayıda işlemek için bir şekilde responsively designed olmuştur bunu denedik.

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