javascript - 从数组中获取未移动的项目并重新显示它们

Question

大家好，我有一个购物车列表，一次显示 3 件商品。我可以使用 javascript 协议(protocol) shift 将项目移动一个并显示列表中的下一个项目，使其看起来像是在滚动。我使用 Push 将移位的项目传递到新数组中。它确实显示添加的项目，但不会转移到以前的项目。这是我到目前为止得到的jsfiddle这是该网站的实时 View 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"
}
];  
})();

Answer 1

您不希望将包含完整数据集的项目从数组中移出。相反，获取滚动索引并将 3 个项目复制到新的范围变量中。您的滚动按钮应该增加或减少 $scope.index 变量。

$scope.$watch('index', function(newVal, oldVal){
    $scope.displayedItems = [$scope.items[newVal], $scope.items[newVal + 1], $scope.items[newVal + 2] ];
});

监视索引并更新显示的项目。