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

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

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

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

相关内容

最新更新

热门标签：