Получить следующий элемент в массиве на ngClick

Я действительно новичок в AngularJS. Я пытаюсь создать простое веб-приложение, которое является не более чем страницей, отображающей продукт. Когда пользователь нажимает кнопку, они переходят к следующему продукту в массиве.Получить следующий элемент в массиве на 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

Я хотел бы, чтобы страница была заполнена следующим продуктом в массиве, но я не уверен, как это сделать. – GeeJay

Я удалил 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>

В контроллере я реализовал следующую и ПРЕД функцию и хранится индекс для отслеживания того, что элемент, который в настоящее время отображается в представлении.

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

ответ

Смежные вопросы