獲取ngClick上的下一個項目

我是AngularJS的新手。我正在嘗試創建一個簡單的Web應用程序，它不過是顯示產品的頁面。當用戶點擊下一個時，他們被帶到陣列中的下一個產品。獲取ngClick上的下一個項目

目前我能使用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' }, 
    ]; 

})();

但我真正想要的是有一個簡單的「下一個「按鈕，該按鈕將在陣列中的下一個所有產品信息中填充同一頁面。

來源

2014-12-02 GeeJay

我們可以如何幫助您？ – cbass 2014-12-02 21:31:36

我希望該頁面能夠與數組中的下一個產品一起填充，但我不知道如何做到這一點。 – GeeJay 2014-12-02 21:37:21

我刪除了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".

來源

2014-12-02 22:19:47 cbass

獲取ngClick上的下一個項目

回答

相關問題