Wie man Bilder mit Knopfklicks mit Hilfe von Angular durchläuft?

Question

Ich habe einige Bilder, die ich mit den vorherigen/nächsten Tasten durchlaufen möchte.

Das Bild soll dynamisch durch eckig sein. Wenn Sie also auf eine der Schaltflächen klicken, sollte ein anderes Bild in dem Array von Bildern angezeigt werden, die ich in der Steuerung habe.

Hier ist im Wesentlichen, was ich versuche:

HTML -

<div> 
    <md-button ng-click="switchImage(-1)"> Prev Image </md-button> 
    <img ng-src="assets/img/{{image}}"/> 
    <md-button ng-click="switchImage(1)"> Next Image </md-button> 
</div> 

Javascript/Schräg -

// Character image selection array 
var self = this; 
self.images = ['image1.gif', 'image2.gif', 'image3.gif', 'image4.gif']; 
self.index = 0; 
$scope.image = self.images[self.index]; // Display the first image 

function switchImage(step) { 
    self.index += step; 
    $scope.image = self.images[self.index]; 
}; 

Irgendwelche Vorschläge auf, was ist der bessere Weg, dies zu tun?

Die Art, wie ich es jetzt habe, ändert das Bild nicht, wenn ich auf die Knöpfe klicke. Ich habe darauf geachtet, einen Breakpoint in die switchImage-Funktion zu setzen, und es geht nicht darauf, wenn ich auf die Buttons klicke.

Answer 1

Wenn Sie nur über den Rand Fall also zu fragen, wenn die Indexgröße erreicht 0 oder 4, dann können Sie Ihren Code wie folgt ändern:

(Auch, müssen Sie diese Funktion im $scope registrieren)

$scope.switchImage = function(step) { 
    self.index += step; 

    // When user keeps clicking next image and index crosses end of array 
    if (self.index == self.images.length) { 
    // reset to zero 
    self.index = 0; 
    } else if (self.index < 0) { 
    // else if user keeps clicking previous image and index goes negative 
    // reset to the last image 
    self.index = self.images.length - 1; 
    } 

    $scope.image = self.images[self.index]; 
};