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

I'm trying to implement an ion-infinite-scroll using the ionic framework, I have a REST API that allows me set the index to get request a range.. my Service looks like this, where begin in end are indexes.

我正在尝试使用离子框架实现离子无限滚动,我有一个REST API,允许我设置索引以获取请求范围..我的服务看起来像这样,其中begin in end是索引。

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

When the page reloads initially i want 10 items in the list so in my controller it would go like this..

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

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

As I scroll down the list, I want my ion-infinite-scroll to get the next 10 items (11 - 20) and the next (21 - 30) and so on.. So how do i do that?

当我向下滚动列表时,我希望我的离子无限滚动获得接下来的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 = [];

In the view it goes like this..

在视图中它是这样的..

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

1 个解决方案

#1

Basicly, you are updating $scope.userRatings, so I'd use something like that which consist of :

基本上,你正在更新$ scope.userRatings,所以我会使用类似的东西:

first getting next items

首先得到下一个项目
then adding those items to your list. Note that I suggest a merge method but without more info on your data structure, it is hard to suggest something appropriate.

然后将这些项目添加到您的列表中。请注意,我建议使用合并方法但没有关于数据结构的更多信息,很难提出合适的建议。
I don't know how you can get noMoreResults to true, but you may know when to intantiate it ;)

我不知道你怎么能把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'); 
  };

EDIT : As your response is like that :

编辑:正如你的回答是这样的:

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

I suggest changing the merge with the follwoing :

我建议用以下方法更改合并:

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

#1