在 angular-ui bootstrap 轮播外获取活动幻灯片索引

Question

我在 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

Answer 1

如果您查看 AngularUI 文档，您会发现幻灯片是如何集成到 HTML:

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

我们可以看到，活动幻灯片由每张幻灯片上的active 属性决定。
因此，您应该能够遍历幻灯片和 return 第一张带有活动属性的幻灯片。只要您没有修改此旋转木马之外的 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 功能）。

在 angular-ui bootstrap 轮播外获取活动幻灯片索引

Get active slide index outside angular-ui bootstrap carousel

twitter-bootstrap

angularjs

angular-ui

angular-ui-bootstrap