AngularJS NgInfiniteScroll zeigt die erste Liste an, wird aber nicht aktualisiert.

Question

Ich versuche eine Tabelle zu erhalten, die neue Einträge hinzufügt, während ich die Seite auf meiner Website herunterscrolle. Während ich jedoch meine erste Liste angezeigt bekommen habe, werden sie nicht aktualisiert. Wie würde ich die Liste aktualisieren, während ich nach unten scrolle? Code ist unten:

Ausblick:

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

Controller:

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

Sie Ihre $scope.images Array überschrieben, statt append. Sie müssen die Methode concat verwenden, um natürlich die alten Elemente an die neuen anzuhängen.

$scope.images = images; 

für:

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

Ich hoffe, es hilft !!

Dann in Ihrer loadMore() Funktion, das nur ändern