引导轮播Ng中有四个项目重复吗? [英] Four items in bootstrap carousel Ng repeat?
本文介绍了引导轮播Ng中有四个项目重复吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在幻灯片中显示四个项目.但是我如何在主行中重复它,因为它为活动幻灯片使用了活动类.这就是我的HTML外观.
I am trying to display four items in a slide. But how do I repeat it the main row, because it uses an active class for the active slide. This is how my HTML looks.
<div class="carousel slide" id="myCarousel">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-3" ng-repeat="image in images"><a href="#"><img ng-src="{{image}}" class="img-responsive"></a></div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
<a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
</div>
还有一个JSON示例.
And an example of the JSON.
$scope.images = [
"http://placehold.it/500/e499e4/fff&text=1",
"http://placehold.it/500/e499e4/fff&text=2",
"http://placehold.it/500/e499e4/fff&text=3",
"http://placehold.it/500/e499e4/fff&text=4",
"http://placehold.it/500/e499e4/fff&text=5",
"http://placehold.it/500/e499e4/fff&text=6",
"http://placehold.it/500/e499e4/fff&text=7",
]
推荐答案
一种实现方法是将数组分成块...
One way you can do it is divide the array in chunks...
<div class="item active">
<div class="row">
<div class="col-xs-3" ng-repeat="image in images.slice(0,4)"><a href="#"><img ng-src="{{image}}" class="img-responsive"></a></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-3" ng-repeat="image in images.slice(5,9)"><a href="#"><img ng-src="{{image}}" class="img-responsive"></a></div>
</div>
</div>
这篇关于引导轮播Ng中有四个项目重复吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文