我正在连接到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>
“我使用| limitTo:4,但我需要一种方法来限制4%滑出10总的。”你的意思是你需要1-4,第二,5-8,等等? – Blackunknown 2014-10-06 15:29:45
@cpk你可能会想要利用'ngRepeat'的'$ index'值,这有助于你确定你在某个特定时刻的位置。这可能会指向正确的方向,因为您可以与该值进行比较,并根据相应的HTML格式的值格式进行比较。 – developer10 2014-10-06 15:40:08
@Blackunknown,是的。感谢您及时的回复。 – cpk 2014-10-06 15:44:34