AngularJS: Bootstrap Karussell zeigt alle Bilder auf einmal in ng-Wiederholung

Question

Ich versuche ein Karussell hinzuzufügen. Aber, alle Bilder zeigen sofort. Ich habe das versucht.

<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/

Jeder Vorschlag bitte?

Edit:

Eigentlich durch einen Klick auf Play-Taste Ich versuche, ein Video zu spielen. Dafür brauche ich einen Index von Karussell. Damit ich Video abspielen kann. Aber hier ist die Play-Taste außerhalb der ng-Wiederholung. Wie kann ich den Index von Karussell bekommen?

Fiddle:http://jsfiddle.net/XxPzW/131/

Answer 1

sich hier geändert wird working code

Sie müssen Intervall verwenden, um Bilder nach einer bestimmten Zeit zu aktualisieren.

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

Schiebetasten unten Geige Ergebnis anzeigen