在angular-ui引导轮播之外获取活动幻灯片索引答案

【问题标题】：Get active slide index outside angular-ui bootstrap carousel在angular-ui引导轮播之外获取活动幻灯片索引
【发布时间】：2015-06-23 01:38:13
【问题描述】：

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

【问题讨论】：

您可以使用活动属性过滤幻灯片 $scope.getActiveSlide = function () { return slides.filter(function (s) { return s.active; })[0]; };

标签： angularjs twitter-bootstrap angular-ui angular-ui-bootstrap

【解决方案1】：

如果您查看 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
};

应该做这项工作（或者您选择实现find 功能）。

【讨论】：