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

大家好，我有一个购物车列表，一次显示3个项目。 我可以使用javascript协议shift将项目逐个移动，并显示列表上的下一个项目，使其看起来像滚动一样。我使用push将移位的项传递到一个新数组中。它会显示添加的项目，但不会切换到以前的项目。 这是我到目前为止得到的 这是现场的实况

（函数（）{
var-app=angular.module（“moxierevere”，['ngCart']）；
app.filter（'myFilter'，函数（）{
返回函数（项目、计数）{
var结果=[]；
对于（变量i=0；i0）结果。推送（项[i]）；
}
返回结果；
};
});
app.controller（“ItemsController”、['ngCart'，'$scope'，函数（ngCart，$scope）{
设定税率（0.00）；
ngCart.setShipping（2.99）；
此项=所有项；
$scope.itemsPerListing=3；
var-shifteditem=[]；
var-shifteditems=[]；
$scope.nextPage=函数（）{
此项=所有项；
如果（$scope.itemsPerListing>=this.items.length）
{
$scope.itemsPerListing=this.items.length；
}
其他的
{
shifteditem.push（$scope.items.shift（））；
控制台日志（移位项）；
}   
};
$scope.prevPage=函数（）{
此项=所有项；
移位项。取消移位（移位项）；
控制台日志（移位项）；
};
}]);
变量allItems=[
{
id:0，
名称：“项目1”，
图像：“http://dreamcpu.com/moxierevere/images/br.JPG" ,
价格：2.00，
提供时间：10，
尺寸：“S、M、L”
},
{
id:1，
名称：“项目2”，
图像：“http://dreamcpu.com/moxierevere/images/avacados.JPG" ,
价格:5.00,，
提供时间：10，
尺寸：“S、M、L”
},
{
id:2，
名称：“项目3”，
图像：“http://dreamcpu.com/moxierevere/images/chicha.JPG" ,
价格：2.00，
可供选择：3，
尺寸：“S、M、L”
},
{
id:3，
名称：“项目4”，
图像：“http://dreamcpu.com/moxierevere/images/lomo.JPG" ,
价格：6.00，
可供选择：4，
尺寸：“S、M、L”
},
{
id:4，
名称：“第5项”，
图像：“http://dreamcpu.com/moxierevere/images/satuna.JPG" ,
价格：2.00，
可供选择：5，
尺寸：“S、M、L”
},
{
id:5，
名称：“第5项”，
图像：“http://dreamcpu.com/moxierevere/images/satuna.JPG" ,
价格：2.00，
可供选择：5，
尺寸：“S、M、L”
},
{
id:6，
名称：“第5项”，
图像：“http://dreamcpu.com/moxierevere/images/satuna.JPG" ,
价格：2.00，
可供选择：5，
尺寸：“S、M、L”
}
];  
})();

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

$scope.$watch('index', function(newVal, oldVal){
    $scope.displayedItems = [$scope.items[newVal], $scope.items[newVal + 1], $scope.items[newVal + 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);
}   
};
}]);

---

我想用。复制并用新数据重置我的当前视图。你为什么要费心转换等？您可以将3个项目放入范围中的新数组中吗？如果数组中的项目不包含数据，则筛选器不会将项目添加到结果数组中。过滤器在控制器之外，因此无法访问结果。我仍然不明白您的观点。为什么你不能在原始数组上使用相同的过滤器并获得所有3个元素？对不起，我是angular的新手，我正试图将我的想法集中在这一点上。没有问题，基本上你希望完整的数据集保持不变，并显示一个子集。在许多不同的情况下都会发生这种情况。如果修改原始数组，这些项目将从数组中删除，因此您无法将它们带回来，除非您执行其他操作，如本例中所示，索引将用于更改this.items的金额？是否必须更改过滤器？在本例中，索引是要显示的3个项目的起点。它应该和过滤器配合得很好

$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);
}   
};
}]);