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

Question

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

查看：

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

Answer 1

您正在覆盖 $scope.images 数组，而不是 append。当然，您必须使用 concat 方法将旧项目附加到新项目。

然后，在您的 loadMore() 函数中，只需更改以下内容：

$scope.images = images;

为：

$scope.images = $scope.images.concat(images);

希望对你有帮助！