AngularJS無限滾動調用API工作，但不顯示新記錄

我一直在嘗試使用AngularJS和我的rails後端今天實現無限滾動。我用jsfiddle（像所有人一樣）http://jsfiddle.net/vojtajina/U7Bz9/AngularJS無限滾動調用API工作，但不顯示新記錄

我打電話給API，發出請求，服務器返回正確的內容。這裏沒有問題。事情是，只顯示第一批或結果。所有其他列表項是空白的（但作爲記錄存在，則仍會創建...）

UPDATE：

當我改變了我的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威茲通過任何手段，所以有可能我錯過了一些東西。

來源

2013-03-13 Lukasz Muzyka

似乎沒什麼問題它顯示10，20，30，40，50，60，70，...等我 – 2013-03-13 06:49:57

你能否詳細說明？ – 2013-03-13 06:55:40

返回的'data'是一個數組嗎？ – 2013-03-13 06:58:32

您需要將$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

來源

2013-03-13 06:59:57

你是男人！ – 2013-03-13 07:25:54

謝謝！這是我正在尋找的。 – 2015-11-29 17:37:25

4年後，這幫了我很多！謝謝！ – 2016-08-18 14:41:32

AngularJS無限滾動調用API工作，但不顯示新記錄

回答

相關問題