在 angular-ui bootstrap carousel 外获取活动幻灯片索引 [英] Get active slide index outside angular-ui bootstrap carousel

问题描述

我在 Angular-UI Bootstrap carousel 外部 carousel 中获取活动幻灯片时遇到问题.
我有一个面板，里面有旋转木马，我想在面板的页脚中放置按钮，使用选定的幻灯片进行操作，但使用 jquery 选择器不是一种选择.

I have a problem getting the active slide in an Angular-UI Bootstrap carousel outside the carousel.
I have a panel, with the carousel inside, and want to put buttons in the footer of the panel that makes actions using the selected slide, but using jquery selectors is not an option.

我想用纯角度的东西来实现它.
我想我可以使用 active 属性，但也许有一些聪明的东西可以更顺利地完成这个技巧.

I want to implement it using something in pure angular.
I think I can use the active attribute, but maybe there is something clever that can do the trick more smoothly.

一些代码(Jade 语法):

Some code (Jade syntax):

.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 中的:

If you look at the AngularUI documentation, you can see this is how the slides are integrated into the HTML:

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

我们可以看到活动幻灯片是由每张幻灯片上的 active 属性决定的.
因此，您应该能够遍历幻灯片并返回带有 active 属性的第一张幻灯片.只要您没有在此轮播之外修改 slides 数组，它就会为您提供当前幻灯片的索引.

We can see that the active slide is determined by the active property on each slide.
So, you should be able to iterate through the slides and return the first slide with the active property on it. As long as you haven't modified the slides array outside of this carousel, it should give you the index of the current slide.

例如，类似于:

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 功能).

Should do the job (or however you choose to implement your find functionality).

这篇关于在 angular-ui bootstrap carousel 外获取活动幻灯片索引的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！