Question

我正在尝试创建一个分页功能，但我感到卡住了。我不确定我是否走在正确的轨道上......

在我看来，我有一个ng-repeat =“res in result”，在页面的末尾我放置了以下内容：

   <ion-infinite-scroll on-infinite="loadMore()" distance="1%"></ion-infinite-scroll>

然后在控制器中，我写了这个：

    var i=1; 
    $http.get( "http://website/search/"+i).success(function(response){
      i++; 
    $scope.result=(response) 
    });

    }

每个页面返回一个包含15个元素的json。我想要做的是当我到达终点时，我想在结果中加载下一个15来显示。

Answer 1

在loadMore

中编写on-infinite="loadMore()"时，您必须在控制器的ion-infinite-scroll函数中获取下一个15项

在控制器中编写如下函数

$scope.result = [];
var i=1;
$scope.loadMore = function(){
   $http.get( "http://website/search/"+i).success(function(response){
      i++; 
      $scope.result.push(response);
   });
}

Check Example

Answer 2

了解我在我的应用中如何实施infinite-scroll

<ion-infinite-scroll ng-if="!loadMorePeople" on-infinite="loadPeople()" distance="1%"></ion-infinite-scroll>

loadPeople（）加载所有滚动数据，代码如下：

$scope.loadMorePeople=false;


$scope.loadPeople = function() {

       if($scope.peoples != null){

          $http({
              method: "get",
              url: baseUrl+"company-members?page="+$scope.pagePeople,
              withCredentials: true,
              headers: {
                'Accept' : 'application/json, text/plain, */*',
                'Authorization' : ''+window.localStorage.getItem("token_type")+' '+window.localStorage.getItem("token")
              }
            })
                .success(function(data) {

                    if(data.length > 0){

                      var newPeople = data;
                      $scope.temp = $scope.peoples.concat(newPeople);
                      $scope.peoples = arrayUnique($scope.temp, 'id');

                        function arrayUnique(collection, keyname) {
                            var output = [], 
                                keys = [];

                            angular.forEach(collection, function(item) {
                                var key = item[keyname];
                                if(keys.indexOf(key) === -1) {
                                    keys.push(key);
                                    output.push(item);
                                }
                             });
                            return output;
                       };

                       ++$scope.pagePeople;
                       $scope.$broadcast("scroll.infiniteScrollComplete");

                    }else{
                      $scope.loadMorePeople=true;
                      $scope.$broadcast("scroll.infiniteScrollComplete");
                    }

                })
                .error(function(data, status) {
                });
          }

          $scope.$broadcast("scroll.infiniteScrollComplete");

    };

由于某些原因，我也遇到了和你一样的问题.push（）没有工作所以我做了这个解决方法。

我在data中检查if(data.length > 0){}是否为空，然后使用.concat(newPeople)合并它们，最后使用arrayUnique($scope.temp, 'id')确保没有重复的实体

如果没有剩余数据可以用来取消其余的数据，那么使用ng-if="!loadMorePeople"来帮助停止通话也是一个好主意。

我希望这能解决你的问题。如果您需要任何帮助，请告诉我：D

离子分页开始

2 个答案: