Question

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

})();

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

Answer 1

我删除了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>

在控制器中，我实现了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' },
];

Here's a working "fiddler".

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

1 个答案: