instagram订阅源与离子框架无限滚动不39;t在中继器错误中停止重复

我正试图用Ionic Framework构建一个IOS和android应用程序，该应用程序有一个带有Instagram api的Instagram Feed，可以显示标签共享的所有照片（我将使用标签chocolat有一个例子），我想实现"拉"刷新和无限滚动，所以基本上，我会有一个按钮，点击后打开一个带有instagram提要的视图，并拉取前10个结果，拉取刷新会尝试获得较新的结果，然后如果提要向下滚动，它会添加下一组结果（较旧的结果）。我一直在寻找，我已经构建了一些不太符合预期的东西。我是ionic、angularjs和javascript的新手开发人员，所以我决定在这里发布我的问题。

这是我的代码：

通过http:获取instagram json的工厂或服务

app.factory('PhotoService', function($http){ 
  var BASE_URL = "https://api.instagram.com/v1/tags/chocolat/media/recent?access_token=+++"; 
  //access_token hidden for privacy reasons
  var items = [];
  var nextUrl = 0;
  return {
    GetFeed: function(){
      return $http.get(BASE_URL+'&count=10').then(function(response){
        items = response.data.data;
        nextUrl = response.data.pagination.next_url;
        return items;
        });
    },
    GetNewPhotos: function(){
      return $http.get(BASE_URL+'&count=2').then(function(response){
        items = response.data.data;
        return items;
      });
    },
    GetOldPhotos: function(){
      return $http.get(nextUrl).then(function(response){
        items = response.data.data;
        return items;
      });
    }
  }
});

控制器：

app.controller('CivrInstagramController', function($scope, $timeout, PhotoService) {
  $scope.items = [];
  $scope.newItems = [];
  PhotoService.GetFeed().then(function(items){
    $scope.items = items;
  });
  $scope.doRefresh = function() {
    if($scope.newItems.length > 0){
      $scope.items = $scope.newItems.concat($scope.items);
     //Stop the ion-refresher from spinning
     $scope.$broadcast('scroll.refreshComplete');
     $scope.newItems = [];
    } else {
      PhotoService.GetNewPhotos().then(function(items){
        $scope.items = items.concat($scope.items);
        //Stop the ion-refresher from spinning
        $scope.$broadcast('scroll.refreshComplete');
      });
    }
  };
  $scope.loadMore = function(){
    PhotoService.GetOldPhotos().then(function(items) {
      $scope.items = $scope.items.concat(items);
      $scope.$broadcast('scroll.infiniteScrollComplete');
    });
  };
});

视图：

<ion-view view-title="#Chocolat Photos!">
  <ion-content>
    <ion-refresher on-refresh="doRefresh()"></ion-refresher>
    <div class="list card" ng-repeat="item in items track by item.id">
      <div class="item item-avatar">
        <img ng-src="{{item.user.profile_picture}}" ng-  if="item.user.profile_picture.startsWith('https')">
        <h2>{{item.user.full_name}}</h2>
        <p><span am-time-ago="item.created_time" am-preprocess="unix"></span></p>
      </div>
      <div class="item item-body" >
        <img ng-src="{{item.images.low_resolution.url}}" ng-if="item.images.low_resolution.url.startsWith('https')">
        <p>
          {{item.caption.text}}
        </p>
      </div>
    </div>
    <ion-infinite-scroll on-infinite="loadMore()" distance="5%"></ion-infinite-  scroll>
  </ion-content>
</ion-view>

PhotoService.GetFeed（）运行良好，因为它正确地填充了前10张照片，然而，当我尝试无限滚动时，我得到了错误：

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys.

我正在逐项使用track.id，正如你在视图中看到的那样，所以我认为这意味着我用PhotoService.GetOldPhotos（）一次又一次地得到相同的结果。对于PhotoService.GetNewPhotos（

我做错了什么？有人能给我一些建议吗？提前感谢您抽出时间！这里有一个指向我的项目的plnkr++链接，在那里你可以看到它正在努力工作：''

++您可能需要在浏览器中启用跨源资源共享，以查看提要是否正常工作。

第1版：几乎完成

因此，经过长时间的工作和console.log（）的：p之后，我能够通过标签获得一个instagram提要，并使其与ionic pull刷新和ionic无限滚动（我想是90%）一起工作，但我的代码仍然有问题，因为每次我滚动到最后一组项目时，我都无法停止无限滚动或加载more（），他们会试图加载更多数据，因为最后一个nextUrl是未定义的，但是instagramapi接受&next_max_tag_id=未定义，并再次获得最新结果，这导致了一个错误，因为ng repeat中不可能有重复，我不想再次显示第一个结果。

我只需要在没有更多结果时停止loadMore和无限滚动，或者如果&next_max_tag_id=未定义，或者如果两个数组中都有重复（但我不认为这是推荐的性能）。下面是我的项目，谢谢你抽出时间！

我将标记更改为低结果的标记，这样您就可以在不厌倦滚动的情况下看到错误：p