AngularJS Ionicframework无限滚动GET REQUEST一次列表10

Question

我正在尝试使用 ionic 框架实现一个 ion-infinite-scroll，我有一个 REST API，允许我设置索引以获取请求范围.. 我的服务看起来像这样，其中 begin in end 是索引.

this.GetUserRatings = function (id, begin, end) {
            return $http.get($rootScope.endPoint + '/user/' + id + '/ratings/'+ begin + '/' + end);
        };  

当页面最初重新加载时，我希望列表中有 10 个项目，所以在我的控制器中它会像这样......

 UserService.GetUserRatings($stateParams.id, 1, 10)
        .success(function (data) {
          $scope.userRatings = angular.fromJson(data);
          }).error(function(error) {
                    //do something
        });

当我向下滚动列表时，我希望我的 ion-infinite-scroll 获得接下来的 10 个项目 (11 - 20) 和下一个 (21 - 30) 等等.. 那么我该怎么做呢？

$scope.loadMore = function() {

   // UserService.GetUserRatings($stateParams.id, ?, ?)
   // $scope.ratings.push({...}); I'm guessing this will be in the success 
   //also how to know if no more results
    $scope.$broadcast('scroll.infiniteScrollComplete'); 
  };

  $scope.ratings = [];

在视图中它是这样的..

 <ion-infinite-scroll ng-if="noMoreResults" on-infinite="loadMore()" distance="10%"></ion-infinite-scroll>

Answer 1

基本上，您正在更新$scope.userRatings，所以我会使用类似的内容：

• 首先获取下一项

• 然后将这些项目添加到您的列表中。请注意，我建议使用合并方法，但如果没有有关您的数据结构的更多信息，很难提出合适的建议。

• 我不知道如何将 noMoreResults 设置为 true，但您可能知道何时实例化它；)

.

 var _loopItems = 10;
 $scope.loadMore = function() {
   var _curLength = $scope.userRatings.length;

   UserService.GetUserRatings($stateParams.id, _curLength  , _curLength  + _loopItems ).success(function (data) {
      $scope.userRatings = angular.merge($scope.userRatings, angular.fromJson(data)); // AS I DON T KNOW YOUR DATAS, IT S HARD TO TELL HOW TO MERGE THOSE VALUES
      }).error(function(error) {
                //do something
    });

    $scope.$broadcast('scroll.infiniteScrollComplete'); 
  };

编辑：因为你的回答是这样的：

[{id:1, userid:1, rating_num:5, rating_text:"foo"},{id:2, userid:2, rating_num:5, rating_text:"foo"}]

我建议将合并更改为以下内容：

data = angular.fromJson(data);
for (var i =0; i< data.length; i++){
  $scope.userRatings.push(data[i]);
}