gpt4 book ai didi

angularjs - 在 Angular-ui Bootstrap 轮播之外获取事件幻灯片索引

转载 作者:行者123 更新时间:2023-12-03 06:42:05 26 4
gpt4 key购买 nike

我在 Angular-UI Bootstrap carousel 外部 carousel 中获取事件幻灯片时遇到问题。
我有一个面板,里面有轮播,并且想在面板的页脚中放置按钮,以使用所选幻灯片进行操作,但使用 jquery 选择器不是一个选项

我想使用纯 Angular 的东西来实现它。
我想我可以使用 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

最佳答案

如果您查看 AngularUI 文档,您可以看到幻灯片是如何集成到 HTML 中的:

<carousel interval="myInterval">
<slide ng-repeat="slide in slides" active="slide.active">
...
</slide>
</carousel>

我们可以看到事件幻灯片是由每张幻灯片上的 active 属性确定的。
因此,您应该能够迭代幻灯片并返回带有 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
};

应该完成这项工作(或者您选择实现查找功能)。

关于angularjs - 在 Angular-ui Bootstrap 轮播之外获取事件幻灯片索引,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29678252/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com