Question

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

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

Answer 2

终于能够使用shift和unshift让它工作了仍然必须处理计数器以正确处理索引，但它到目前为止工作。

$scope.nextitem = function () {
  this.items = allItems;
    if($scope.itemsPerListing >= this.items.length)
    {
        $scope.itemsPerListing =  this.items.length;
        console.log($scope.itemsPerListing);
    }
    else
    {
    shifteditem.push( $scope.items.shift());
    counter = shifteditem.length;
     console.log(this.items.length);
     if (counter > $scope.itemsPerListing)
     {
         counter  = this.items.length + 2;

     }
    }        
  };

$scope.previtem = function() {
this.items = allItems;

if(counter > 0){
    $scope.items.unshift(shifteditem[counter-1]);
    counter = counter - 1;
    console.log(counter);
}   
};
}]);

从数组中获取未移位的项目并重新显示它们angularjs

2 个答案: