我在Angular-UI Bootstrap carousel
外面 carousel
中获取活动幻灯片时遇到问题。
我有一个面板,里面有旋转木马,并希望将按钮放在面板的页脚中,使用所选幻灯片进行操作,但使用jquery选择器不是一个选项。
我想用纯角度的东西来实现它 我想我可以使用active属性,但也许有一些聪明的东西可以更顺利地完成这个技巧。
一些代码(Jade语法):
.panel.panel-info
.panel-body
carousel.imgCarousel(interval='5000')
slide(ng-repeat='media in selCard.superviseTab.media')
img.img-responsive(preload-image ng-src='/api/cards/{{selCard.superviseTab.sID}}/media/{{$index}}')
.carousel-caption
multiSelect
h4 Slide {{$index+1}} of {{selCard.superviseTab.media.length}}
p {{media.originalFilename}}
.panel-footer
.navbar-collapse.collapse
ul.nav.navbar-nav.navbar-left
li
a.btn.btn-danger
i.fa.fa-unlink
答案 0 :(得分:5)
如果查看AngularUI文档,您可以看到幻灯片是如何集成到HTML中的:
<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
...
</slide>
</carousel>
我们可以看到活动幻灯片由每张幻灯片上的active
属性决定
因此,您应该能够遍历幻灯片并返回带有活动属性的第一张幻灯片。只要您没有修改此轮播之外的slides
数组,它就应该为您提供当前幻灯片的索引。
例如:
function isActive(slide) {
return slide.active;
};
$scope.getActiveSlide = function() {
var activeSlides = $scope.slides.filter(isActive)[0];
//return the first element, since the array should only return one item
};
应该完成这项工作(或者您选择实施find
功能)。