कोणीय यूआई बूटस्ट्रैप स्लाइडर प्रति स्लाइड एकाधिक आइटम

Question

मैं एक वेब सेवा से कनेक्ट कर रहा हूं और प्रत्येक स्लाइड के लिए 4 आइटम के साथ एक यूआई बूटस्ट्रैप कैरोसेल को पॉप्युलेट करना चाहता हूं। मैं उपयोग कर रहा हूँ | सीमा: 4, लेकिन मुझे कुल 10 में से 4 स्लाइड को सीमित करने का एक तरीका चाहिए।

यहाँ एचटीएमएल संदर्भ

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

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

    events.success(function(data) { 

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

    }); 

}); 

के लिए

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

नियंत्रक संभवतः एक आसान समाधान है कि मैं एक एनजी-दोहराने फिल्टर का उपयोग कर याद आ रही है। मदद के लिए धन्यवाद एक गुच्छा।

अद्यतन: मैं उत्तरदायी के लिए लेखांकन नहीं कर रहा हूं, लेकिन बाद में (फुर्तीली स्प्रिंट) की आवश्यकता होगी। अभी भी लूप में + = के चारों ओर अपना दिमाग लपेट रहा है, लेकिन यह अच्छी तरह से काम कर रहा है। मुझे लगता है कि मैं चौथी वस्तु से शुरू कर रहा हूं और वहां से जा रहा हूं ... आपकी मदद के लिए धन्यवाद।

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

मैं इस एक ही है कि किसी तरह से स्क्रीन रिज़ॉल्यूशन के आधार पर वस्तुओं की अलग संख्या में प्रस्तुत करने के लिए responsively designed कर दिया गया है की कोशिश की।

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