3

我今天一直在尝试使用 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，所以我可能错过了一些东西。

4

1 回答 1

6

您需要更改$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();
}

演示：您的案例，解决方案

于 2013-03-13T06:59:57.070 回答