AngularJS Ionicframework无限滚动请求一次请求列表10

Question

我正在尝试使用离子框架实现一个离子-无限滚动，我有一个REST，它允许我设置索引以获得请求范围。我的服务看起来是这样的，最后开始是索引。

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

当我向下滚动列表时，我希望我的离子无限滚动得到下面的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变成真，但你可能知道什么时候该把它写成真;)

。

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