Javascript 单击获取数组中的下一项_Javascript_Angularjs_Angularjs Directive

Javascript 单击获取数组中的下一项

javascript angularjs

Javascript 单击获取数组中的下一项,javascript,angularjs,angularjs-directive,Javascript,Angularjs,Angularjs Directive,我对AngularJS真的很陌生。我正在尝试创建一个简单的web应用程序，它只不过是一个显示产品的页面。当用户单击“下一步”时，他们将被带到阵列中的下一个产品目前，我可以使用ngRepeat指令显示数组中的所有项： <body class="container" ng-controller="StoreController as store"> <center><div ng-repeat="product in store.products">

我对AngularJS真的很陌生。我正在尝试创建一个简单的web应用程序，它只不过是一个显示产品的页面。当用户单击“下一步”时，他们将被带到阵列中的下一个产品

目前，我可以使用ngRepeat指令显示数组中的所有项：

<body class="container" ng-controller="StoreController as store">
<center><div ng-repeat="product in store.products">
    <img width="200" ng-src="{{product.images}}"/>
    <h4>{{product.item}}</h4>

    <h4>Amount: {{product.number}} count: {{count}}</h4>

    <button ng-click="count = count + 1" ng-init="count=0">
      Increase
    </button>
    <br>
    <button ng-click="count = count - 1" ng-init="count=0">
      Decrease
    </button>
    <br><br>
  </h3>
  <button class="button" >Add</button>

</div>
</center>

但我真正想要的是有一个简单的“下一步”按钮，它将在同一页面中填充数组中下一步的所有产品信息。

我删除了ng repeat，一次只显示一个项目，并将

store.nextProduct

和

store.prevProduct

添加到按钮中，以选择下一个或上一个项目

<body class="container" ng-controller="StoreController as store">
   <center>
      <img width="200" ng-src="{{store.currentProduct.images}}"/>
      <h4>{{store.currentProduct.item}}</h4>
      <h4>Amount: {{store.currentProduct.number}}</h4>
      <button ng-click="store.nextProduct()">
         Increase
      </button>
      <br>
      <button ng-click="store.prevProduct()">
         Decrease
      </button>
      <br><br>
     <button class="button">Add</button>
   </center>
</body>

我们可以为您提供什么帮助？我希望页面中填充阵列中的下一个产品，但我不确定如何操作。

<body class="container" ng-controller="StoreController as store">
   <center>
      <img width="200" ng-src="{{store.currentProduct.images}}"/>
      <h4>{{store.currentProduct.item}}</h4>
      <h4>Amount: {{store.currentProduct.number}}</h4>
      <button ng-click="store.nextProduct()">
         Increase
      </button>
      <br>
      <button ng-click="store.prevProduct()">
         Decrease
      </button>
      <br><br>
     <button class="button">Add</button>
   </center>
</body>

var app = angular.module('store', []);
app.controller('StoreController', function(){
   var productIndex = 0;
   this.currentProduct = items[productIndex];
   this.nextProduct = function() {
      productIndex = productIndex+1;
      this.currentProduct = items[productIndex];
   };
   this.prevProduct = function() {
     productIndex = productIndex-1;
     this.currentProduct = items[productIndex];
   };
});

var items = [
   { item: 'Top', number: 2, images: 'shirt_icon.jpeg' },
   { item: 'Bottom', number: 5, images: 'pants_icon.jpg' },
   { item: 'Underwear', number: 3, images: 'underwear_icon.jpg' },
];