Question

我无法让数组中的下一个索引显示在屏幕上。我不确定我做错了什么。目前，如果我点击左箭头，我会得到Trek自行车，如果我点击右箭头，我会得到Mongoose，但是没有更多的自行车出现在任何一个按钮上。任何帮助表示赞赏。

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

在阵列中显示下一个对象onclick

1 个答案: