gpt4 book ai didi

ruby-on-rails - AngularJS 无限滚动调用 API 有效但不显示新记录

转载 作者:行者123 更新时间:2023-12-04 07:39:11 24 4
gpt4 key购买 nike

今天我一直在尝试使用 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();
}

演示:Your Case , Solution

关于ruby-on-rails - AngularJS 无限滚动调用 API 有效但不显示新记录,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15378010/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com