如何获得当前幻灯片索引:uib轮播

时间:2017-01-18 13:09:32

标签: angular-ui-bootstrap carousel

我想获取当前的幻灯片索引onChange而不是onClick,但我不知道该怎么做。

首先,我用ng-click进行了这样的操作:

在.html中:

<ul uib-carousel id="myCarousel" active="active" no-wrap="noWrapSlides"
        style="background-color: #0a0a0a; height:100%; width:100%; padding: 0">
        <li id="mySlides" uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id"
            style="background-color: #0a0a0a; height: 100%;width: 100%;">
            <img ng-src="{{slide.imageUrl}}" ng-click="setSelectedImage(slide.data)" style="background-color: #0a0a0a; height: 100%;width: 100%; max-height: 640px; max-width: 800px"/>

        </li>
    </ul>

在.js中:

 $scope.myInterval = 5000;
 $scope.noWrapSlides = false;
 $scope.active = 0;
 var currIndex = 0;
 var slides = $scope.slides = [];

 $scope.addSlide = function(media,data) {
      slides.push({
          imageUrl: $scope.urlWsImg+media.mediaId+"/stream/800",
          id: currIndex++,
          data:data
      });
 };

 $scope.addSlide($scope.currentImage.media,$scope.currentImage);//bootstrap
 for(var i=0;i<enrichedImages.length;i++) {
    var enrichedImage=enrichedImages[i];
    $scope.addSlide(enrichedImage.previewImage,enrichedImage);
 }
 $scope.setSelectedImage =function(imageUrl){
     $scope.currentEnrichedImage=imageUrl;
 }

我已尝试在onchange="setSelectedImage(slide.data)"中添加#my-carousel,但由于更改发生时幻灯片未知,因此无效。

我希望有人可以帮助我。

2 个答案:

答案 0 :(得分:3)

您无法使用ngChange,因为该指令未公开任何ngModel

来自ngChange文档

  

请注意,此指令要求存在ngModel。

但是您拥有active

$watch属性
$scope.$watch('active', function(newIndex, oldIndex) {
    if (Number.isFinite(newIndex) && newIndex!==oldIndex) {
        // invoke your function here
    }
});

Here is a forked plunk

答案 1 :(得分:1)

似乎有效持有当前指数。 您应该只能使用$ scope.active。