Question

我一直在尝试使用AngularJS和我的rails后端实现无限滚动。我使用了jsfiddle（像所有人一样）http://jsfiddle.net/vojtajina/U7Bz9/

我正在调用API并且发出请求并且服务器返回正确的内容。这里没问题。问题是，只显示第一批或结果。每个其他列表项都是空白的（但仍然在记录存在时创建...）

更新：

当我更改HTML以显示div而不是列表项时，我注意到每次滚动到底部时都会出现一个新的div。考虑到我每个请求加载10条记录，这很奇怪......

这是代码：

<body ng-app="scroll" ng-controller="Main">
  <div id="fixed" when-scrolled="loadMore()">
    <ul class="unstyled">
      <li ng-repeat="user in users">{{user.first_name}}</li>
    </ul>
  </div>
</body>

function Main($scope, $http) {
  $http.get('/users.json').success(function(data){
    $scope.users = data;
  });

  var counter = 0;
  $scope.loadMore = function() {
    $http.get('/users/page/'+counter+'.json').success(function(data){
        $scope.users.push(data);
    });
    counter += 1;
    console.log($scope.users);
  };
  $scope.loadMore();
}

angular.module('scroll', []).directive('whenScrolled', function() {
  return function(scope, elm, attr) {
    var raw = elm[0];

    elm.bind('scroll', function() {
        if (raw.scrollTop + raw.offsetHeight >= raw.scrollHeight) {
            scope.$apply(attr.whenScrolled);
        }
    });
  };
});

我不是一个JS wizz，所以我可能错过了一些东西。

Answer 1

您需要将$scope.users.push(data);更改为$scope.users = $scope.users.concat(data);。

这里当您调用$scope.users.push(data);时，数组会作为项添加到用户，因此当加载第2页时，users有前10项+数组作为第11项。它不是您想要的，您希望将users数组与data数组连接起来。

function Main($scope, $http) {
    $scope.users = [];

    var page = 1;
    $scope.loadMore = function() {
        $http.get('/users/page/' + page + '.json').success(function(data) {
                    $scope.users = $scope.users.concat(data);
                });
        page += 1;
        console.log($scope.users);
    };
    $scope.loadMore();
}

演示：Your Case，Solution

AngularJS无限滚动调用API有效，但不显示新记录

1 个答案: