AngularJS Ionicframework 无限滚动一次获取 10 个列表

Question

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

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

AngularJS Ionicframework 无限滚动一次获取 10 个列表

AngularJS Ionicframework infinite scroll GET REQUEST a list 10 at a time

javascript

infinite-scroll

angularjs

ionic-framework

ionic