在ngClick上获取数组中的下一项

geejay 发表于 Dev

吉杰

我真的是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>

(function() {
  var app = angular.module('store', [ ]);

  app.controller('StoreController', function(){
    this.products = items;
  });

  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' },
  ];

})();

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

鲈鱼

我删除了NG-重复，只显示当时的一个项目，并添加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>

在控制器中，我实现了next和prev函数，并存储了一个索引以跟踪视图中当前显示的项目。

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' },
];

这是一个正在工作的“提琴手”。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。