Question

我正在尝试添加旋转木马。但是，所有图像都会立刻显示出来。我试过这个。

<div ng-controller="CarouselDemoCtrl">
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators" ng-repeat="slide in slides">
      <li data-target="#carousel-example-generic" data-slide-to="$index" ng-class="{active: $index}"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item" ng-class="{active:$index}" ng-repeat="slide in slides">
        <img ng-src="{{slide.image}}?{{$index}}" style="margin:auto;">
      </div>
    </div>
  </div>
</div>

http://jsfiddle.net/XxPzW/125/

有什么建议吗？

修改：

其实我正试图点击播放按钮播放视频。为此我需要轮播的索引。这样我就可以播放视频。但是这里的播放按钮位于 ng-repeat 之外。我怎样才能获得Carousel的索引。

小提琴： http://jsfiddle.net/XxPzW/131/

Answer 1

这是您修改后的working code

您需要在一定时间后使用Interval更新图像。

<div ng-controller="CarouselDemoCtrl">
  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#carousel-example-generic" ng-repeat="slide in slides" data-slide-to="$index" ng-class="{active:isActive($index)}"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div >
      <div class="item" ng-class="{active:index}">
        <img src="{{currentImage.image}}?{{index}" style="margin:auto;">
        {{currentImage.text}}
      </div>
    </div>
  </div>
</div>


var myApp = {};
var app = angular.module('myApp', ['ui.bootstrap', 'ngAnimate'])

app.controller('CarouselDemoCtrl', ['$scope', '$animate', '$interval', function($scope, $animate, $interval) {

  // will work as normal, if globaly disabled
  $animate.enabled(true);

  $scope.slides = [{
    image: 'http://lorempixel.com/400/200/',
    text: 'blah1'
  }, {
    image: 'http://lorempixel.com/400/200/nature',
    text: 'blah2'
  }, {
    image: 'http://lorempixel.com/400/200/food',
    text: 'blah3'
  }, ];

    $scope.isActive = function (i){
    return $scope.index-1 == i;
  }
  $scope.index = 0;
  $scope.currentImage = $scope.slides[$scope.index];

    $scope.updateImage = function (){
    $scope.currentImage = $scope.slides[ $scope.index];
    $scope.index++;
    if($scope.index >= $scope.slides.length ){
        $scope.index = 0
    }
  }

  $interval($scope.updateImage, 2000);

}]);

Answer 2

fiddle link

angularjs

angular.module('MyDemo', ['angular-carousel'])
.controller('MyCtrl', function ($scope) {
    $scope.slideIndex = 0;

});

HTML

<div ng-app="MyDemo">
<div ng-controller="MyCtrl">
    <ul rn-carousel rn-carousel-indicator rn-carousel-index="slideIndex" class="carousel-ui">
         <img ng-src="https://c7.staticflickr.com/3/2538/3742771246_2648fa4e6e_b.jpg" style="margin:auto;">
         <img ng-src="https://c7.staticflickr.com/3/2538/3742771246_2648fa4e6e_b.jpg" style="margin:auto;">
         <img ng-src="https://c7.staticflickr.com/3/2538/3742771246_2648fa4e6e_b.jpg" style="margin:auto;">
    </ul>
</div>
</div>

幻灯片按钮显示在小提琴结果下面

AngularJS：Bootstrap Carousel在ng-repeat中一次显示所有图像

2 个答案: