6

我正在連接到Web服務並希望爲每個幻燈片填充4個項目的UI Bootstrap傳送帶。我正在使用| limitTo:4,但我需要一種方法來限制每張幻燈片中總共10張幻燈片。Angular UI引導滑塊每張幻燈片有多個項目

下面是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> 

控制器參考

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重複過濾器失蹤。謝謝你的幫忙。

更新:我沒有考慮響應,但需要在稍後的時間(敏捷衝刺)。仍然圍繞循環中的+ =進行思考,但它的運作良好。我想我從第四項開始,並從那裏上去......再次感謝您的幫助。

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

「我使用| limitTo:4,但我需要一種方法來限制4%滑出10總的。」你的意思是你需要1-4,第二,5-8,等等? – Blackunknown 2014-10-06 15:29:45

+1

@cpk你可能會想要利用'ngRepeat'的'$ index'值,這有助於你確定你在某個特定時刻的位置。這可能會指向正確的方向,因爲您可以與該值進行比較,並根據相應的HTML格式的值格式進行比較。 – developer10 2014-10-06 15:40:08

+0

@Blackunknown,是的。感謝您及時的回覆。 – cpk 2014-10-06 15:44:34

回答

6

我想這是一個以某種方式來呈現不同的數量取決於屏幕分辨率項目已經responsively designed

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

enter image description here

+1

來自這個問題http://stackoverflow.com/問題/ 26252038/multi-item-responsive-carousel/26456191#26456191 – 2014-10-20 16:29:57

+0

爲此製作了一個自定義版本以適合我的用例。謝謝你,約翰。 – cpk 2014-10-20 18:32:36

+0

約翰,快速跟進問題....我用很多綁定,以及多個滑塊實例填充每個幻燈片4個div。有沒有一種方法可以減少冗長?我很滿意它的工作原理,但爲了將來的參考,它可能是很好的知道。再次感謝。 – cpk 2014-10-20 22:59:37