配列onclickの次のオブジェクトを表示

Question

配列の次のインデックスを表示できません。私は何が間違っているのか分かりません。現在、私が左の矢印を押すとトレックのバイクを手に入れ、右の矢印を押すとモンゴースを手に入れますが、いずれのボタンもクリックしてもそれ以上のバイクは表示されません。どんな助けもありがとうございます。

app.js

var app = angular.module('formApp', ['ngAnimate']); 
app.controller('BikeController',['$scope', function($scope){ 
$scope.bikeSlide = false; 


$scope.products = [ 
{ 
manufacturer: "Trek", 
image: 'images/bike1.jpg' 
}, 
{ 
manufacturer: "Mongoose", 
image: 'images/bike2.jpg' 

}, 
{ 

    manufacturer: "Portlandia", 
image: 'images/bike3.jpg' 
}, 
{ 

    manufacturer: "Giant", 
image: 'images/bike4.jpg' 
}, 
{ 

    manufacturer: "Framed", 
image: 'images/bike5.jpg' 
}, 
{ 
manufacturer: "Windsor", 
image: 'images/bike6.jpg' 
} 
]; 


$scope.LeftArrowClick =function(selectedIndex){ 
$scope.selectedIndex--; 
    $scope.selectedObject = $scope.products[selectedIndex]; 

if ($scope == -1){ 
$scope = 6; 

} 
}; 

$scope.RightArrowClick =function(selectedIndex){ 
$scope.selectedIndex++; 
    $scope.selectedObject = $scope.products[selectedIndex]; 

if ($scope == 7){ 
$scope = 0; 

} 
}; 


}]); 

index.htmlを

<div class="products" ng-controller="BikeController"> 
    <div class="row"> 

     <div class="col-md-1" id="leftArrow" ng-click="LeftArrowClick(0)"> 
      <a ng-href="#"><img ng-src="images/leftarrow.png" class="img-responsive"></a> 
     </div> 
     <div class="bikesandtitles"> 

      <div id="bikeTitle" class="col-md-8 text-center"> 
       {{selectedObject.manufacturer}} {{selectedObject.images[0]}} 
       <img id="bikePic" ng-src="{{selectedObject.image}}"> 
      </div> 
     </div> 

     <div class="col-md-1" id="rightArrow" ng-click="RightArrowClick(1)"> 
      <a ng-href="#"><img ng-src="images/rightarrow.png" class="img-responsive"></a> 
     </div> 



    </div> 
</div> 
<!--End controller--> 

Answer 1

私はあなたのコードにいくつかの変更を加えました。これを試してみてください：

HTML：

<div class="col-md-1" id="leftArrow" ng-click="displayProduct(-1)"> 
    <a ng-href="#"><img ng-src="images/leftarrow.png" class="img-responsive"></a> 
    </div> 
    <div class="bikesandtitles"> 

    <div id="bikeTitle" class="col-md-8 text-center"> 
     {{selectedObject.manufacturer}} {{selectedObject.image}} 
     <img id="bikePic" ng-src="{{selectedObject.image}}"> 
    </div> 
    </div> 

    <div class="col-md-1" id="rightArrow" ng-click="displayProduct(1)"> 
    <a ng-href="#"><img ng-src="images/rightarrow.png" class="img-responsive"></a> 
    </div> 

</div> 

JS：

var app = angular.module('formApp', ['ngAnimate']); 
app.controller('BikeController', ['$scope', function($scope) { 
    $scope.bikeSlide = false; 

    $scope.products = [{ 
    manufacturer: "Trek", 
    image: 'images/bike1.jpg' 
    }, { 
    manufacturer: "Mongoose", 
    image: 'images/bike2.jpg' 
    }, { 
    manufacturer: "Portlandia", 
    image: 'images/bike3.jpg' 
    }, { 
    manufacturer: "Giant", 
    image: 'images/bike4.jpg' 
    }, { 
    manufacturer: "Framed", 
    image: 'images/bike5.jpg' 
    }, { 
    manufacturer: "Windsor", 
    image: 'images/bike6.jpg' 
    }]; 

    $scope.displayProduct = function(increment) { 
    var actualIndex = $scope.products.indexOf($scope.selectedObject) || 0; 
    var index = actualIndex + increment; 
    if (index < 0) 
     index = $scope.products.length - 1; 
    if (index >= $scope.products.length) 
     index = 0; 
    $scope.selectedObject = $scope.products[index]; 
    }; 

}]); 

Plunker： https://plnkr.co/edit/w2CtaFbl5l4d1BY663So