Javascript 当用户无限滚动并删除以前数据的dom元素时，Angular js避免重复数据

我正在使用Angular js Infinite scroll with out jquery，我想在加载时显示前3个数据，当用户滚动时，它会从数组j-son对象加载下3个数据。问题是，我可以在加载时加载前3个数据，但在scroll中，它会再次加载前3个数据，而不是显示下3个数据。此外，如果用户向下滚动查看下一组数据，它会显示数据，同时，如果用户向上滚动显示基于分页的上一组数据概念，则会显示数据

以下数组用于解析控制器中的数据：

var app=angular.module'Demo'，[]； 应用程序控制器'VerticleDemo'，函数$scope{ $scope.items=[]； $scope.Arr=[{ 选择：11， 光电计数：12 }, { 选择：21， 光电计数：22 }, { 选择：31， 光电计数：32 }, { 选择：1， 光电计数：1 }, { 选择：71， 光电计数：72 }, { 选择：441， 光电计数：90 }, ]; $scope.addItems=函数{ 对于变量i=0；i<3；i++{ $scope.items.push$scope.Arr[i]； } }; $scope.addItems； }; .滚动加载程序{ 背景：F7F7； 高度：90px； 边框：3px实心d2d2d2； 边缘底部：20px； 溢出：自动； 填充：10px0； 边界半径：.5雷姆0.5雷姆； } .滚动加载程序李{ 列表样式：无； 边框底部：1px实心aaa； 填充物：5px； 利润底部：3倍； } 我不知道如何消除重复数据。我也尝试了不同的方法来避免这个问题。js-fiddle链接如下所示： 帮助解决此问题。

问题在您的附加项中：

您总是将项目0添加到3，您要做的是创建一个偏移量变量，该变量将跳过已显示的项目。每次你的卷轴被实例化时，你都可以增加X。为了便于使用，我将数字3存储在一个变量中。但是，我建议将其作为指令的一部分，这样您就可以在html元素上设置它以获得灵活性

var app = angular.module('myApp',[]);
app.controller('tstrll', function($scope) {

  $scope.items = [];
  $scope.Arr = [{
    "Select": "11",
    "PhotoCount": "12"
  }, {
    "Select": "21",
    "PhotoCount": "22"
  }, {
    "Select": "31",
    "PhotoCount": "32"
  }, {
    "Select": "1",
    "PhotoCount": "1"
  }, {
    "Select": "71",
    "PhotoCount": "72"
  }, {
    "Select": "441",
    "PhotoCount": "90"
  }, ];

  $scope.numberOfItems = 3;
  $scope.offSet = 0; //save the offset.
  $scope.addItems = function() {
    if ($scope.offSet <= $scope.Arr.length) //make sure it stops when there are NO new elements.
    {
      //increase the loop to match the offset to grab new values
      for (var i = $scope.offSet; i < $scope.offSet + $scope.numberOfItems; i++) {

        $scope.items.push($scope.Arr[i]);

      }
        $scope.offSet += $scope.numberOfItems; //increment the offset by 3.
    }
  };


  $scope.addItems();
});


    app.directive('infiniteScroll', [ "$window", function ($window) {
        return {
            link:function (scope, element, attrs) {
                var offset = parseInt(attrs.threshold) || 0;
                var e = element[0];

                element.bind('scroll', function () {
                    if (e.scrollTop + e.offsetHeight >= e.scrollHeight - offset) {
                        scope.$apply(attrs.infiniteScroll);
                    }
                });
            }
        };
    }]);

演示