Greetings, everyone! I am currently working on a shopping cart list that only displays three items at a time. To achieve the scrolling effect and shift the displayed items by one, I have implemented the javascript protocol shift. By using push, I transfer the shifted items into a new array. While this method successfully adds new items to the list, it does not scroll back to display the previous items. You can view my progress so far on jsfiddle or visit the live site at live site
(function(){
var app = angular.module("moxierevere",['ngCart']);
app.filter('myFilter', function () {
return function (items, count) {
var result = [];
for (var i = 0; i < items.length && result.length < count; ++i) {
if (items[i].available > 0) result.push(items[i]);
}
return result;
};
});
app.controller("ItemsController",['ngCart', '$scope', function(ngCart, $scope){
ngCart.setTaxRate(0.00);
ngCart.setShipping(2.99);
this.items = allItems;
$scope.itemsPerListing = 3;
var shifteditem = [];
var shifteditems = [];
$scope.nextPage = function () {
this.items = allItems;
if($scope.itemsPerListing >= this.items.length)
{
$scope.itemsPerListing = this.items.length;
}
else
{
shifteditem.push( $scope.items.shift());
console.log(shifteditem);
}
};
$scope.prevPage = function() {
this.items = allItems;
shifteditems.unshift(shifteditem);
console.log( shifteditems);
};
}]);
var allItems = [
{
id:0,
name: "item1",
image: "http://dreamcpu.com/moxierevere/images/br.JPG" ,
price: 2.00,
available: 10,
size: "S , M, L"
},
{
id:1,
name: "item2",
image: "http://dreamcpu.com/moxierevere/images/avacados.JPG" ,
price: 5.00,
available: 10,
size: "S , M, L"
},
{
id:2,
name: "item3",
image: "http://dreamcpu.com/moxierevere/images/chicha.JPG" ,
price: 2.00,
available: 3,
size: "S , M, L"
},
{
id:3,
name: "item4",
image: "http://dreamcpu.com/moxierevere/images/lomo.JPG" ,
price: 6.00,
available: 4,
size: "S , M, L"
},
{
id:4,
name: "item5",
image: "http://dreamcpu.com/moxierevere/images/satuna.JPG" ,
price: 2.00,
available: 5,
size: "S , M, L"
},
{
id:5,
name: "item5",
image: "http://dreamcpu.com/moxierevere/images/satuna.JPG" ,
price: 2.00,
available: 5,
size: "S , M, L"
},
{
id:6,
name: "item5",
image: "http://dreamcpu.com/moxierevere/images/satuna.JPG" ,
price: 2.00,
available: 5,
size: "S , M, L"
}
];
})();