AngularJS NgInfiniteScroll显示初始列表,但不会更新

AngularJS NgInfiniteScroll displays initial list, but will not update

本文关键字:更新 列表 NgInfiniteScroll 显示 AngularJS      更新时间:2023-09-26

我正在尝试获取一个表格,当我在我的网站上向下滚动页面时,该表格将添加新条目。 但是,虽然我已经出现了我的初始列表,但它们不会更新。 如何在向下滚动时更新列表? 代码如下:

视图:

 <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);

我希望它有帮助!!