AngularJS NgInfiniteScroll显示初始列表,但不会更新
AngularJS NgInfiniteScroll displays initial list, but will not update
我正在尝试获取一个表格,当我在我的网站上向下滚动页面时,该表格将添加新条目。 但是,虽然我已经出现了我的初始列表,但它们不会更新。 如何在向下滚动时更新列表? 代码如下:
视图:
<table border = "3" ng-init="users()" >
<div infinite-scroll='loadMore()' infinite-scroll-distance='3'>
<tr ng-repeat = "y in images track by $index">
<td>{{y.username}}</td>
<td>{{y.appId}}</td>
<td>{{y.aaid}}</td>
</tr>
</div>
</table>
控制器:
var userurl = '';
var images = [];
var returnUsers = [];
$scope.users = function(){
userurl = 'http://localhost:8085/rest/uafapp/userlisttest';
var userdata = [];
var userconfig =
{
headers: {
'Content-Type':'application/json'
}
};
var userPostRequest = $.get(userurl, userdata, userconfig);
var userjson = '{'"USER_DATA_RETRIEVED'" : '"fail'"}';
userPostRequest.done(function(userdata){
userjson = JSON.stringify(userdata);
userjson = userjson.replace(/''"/g, '"');
userjson = userjson.replace(/'"{/g, '{');
userjson = userjson.replace(/}'"/g, '}');
//console.log("userjson :: " + userjson);
var postResponse = jQuery.parseJSON(userjson);
returnUsers = postResponse['users'];
$scope.returnUsers = returnUsers;
//console.log(JSON.stringify($scope.returnUsers));
$scope.$apply()
})
$.when(userPostRequest).done(function(){
images = [returnUsers[Object.keys(returnUsers)[0]],
returnUsers[Object.keys(returnUsers)[1]],
returnUsers[Object.keys(returnUsers)[2]],
returnUsers[Object.keys(returnUsers)[3]] ];
//console.log(JSON.stringify($scope.returnUsers[Object.keys($scope.returnUsers)[0]]));
//console.log(JSON.stringify($scope.returnUsers[Object.keys($scope.returnUsers)[1]]));
//console.log(JSON.stringify($scope.returnUsers[Object.keys($scope.returnUsers)[2]]));
//console.log(JSON.stringify($scope.returnUsers[Object.keys($scope.returnUsers)[3]]));
$scope.images = images;
var last = images.length;
console.log("------- loop and index: " + last);
$scope.$apply()
});
};
$scope.loadMore = function() {
console.log("first thing inside the loadMore method");
var last = images.length - 1;
console.log("before the loop and index: " + last);
for(var i = 1; i <= 5; i++) {
console.log("inside the loop " + i);
images.push(returnUsers[Object.keys(returnUsers)[last + i]]);
}
$scope.images = images;
$scope.$apply();
};
您正在覆盖$scope.images
数组,而不是append
.当然,您必须使用 concat 方法将旧项与新项追加。
然后,在您的loadMore()
函数中,只需更改以下内容:
$scope.images = images;
为:
$scope.images = $scope.images.concat(images);
我希望它有帮助!!
相关文章:
- 正在更新列表框所选索引
- 如何更新列表项由jQuery AJAX调用添加的ASP Dropdown:错误无效的回发或回调
- 使用jquery添加和更新列表
- 在不可变JS中更新列表中的对象
- 余烬 js 不更新列表从模板中的模型检索
- 动态更新列表中的数据
- SharePoint 2010 - Javascript 根据标题更新列表项值
- SharePoint 2013 更新列表项时保存冲突错误
- SPServices更新列表项未更新
- Yii,通过ajax更新列表,无法理解它是如何工作的;
- jquery mobile切换到更新列表
- 上传文件时通过AJAX更新列表
- SPServices - JQuery - 调用以更新列表项
- 正在更新列表项的类-jQuery
- 更新列表项目类别单击
- 使用AJAX的Ruby on Rails更新列表打破了顺序
- AJAX/jQuery在同一页面上添加表单和更新列表的最佳实践
- 如何在angularjs中更新列表
- react -原生更新列表视图数据源
- 使用jquery更新列表顺序