Luk*_*yka 3 api ajax ruby-on-rails infinite-scroll angularjs
我一直在尝试使用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,所以我可能错过了一些东西.
你需要$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();
}