2015-11-13 35 views
0

我試圖基本上使用ngInfinite Scroll循環AngularJS $ Http操作。我已經成功地使用1 $ Http pull並加載http://www.w3schools.com/angular/customers.php文件的部分文件,但我想使用ngInfinite Scroll重新加載這些文件中的15個值,我不確定如何將它放入「loadMore」函數。因此,在初始加載時,從文件中提取完整的15個值。然後,一旦我向下滾動,再次拉動它。謝謝!

<div ng-app="myApp" ng-controller="customersCtrl"> 
    <div infinite-scroll='loadMore()'> 
     <div ng-repeat="x in records"> 
     <p>{{ x.Name + ', ' + x.Country}} 
     </div> 
    </div> 
</div> 

var app = angular.module('myApp', ['infinite-scroll']); 
app.controller('customersCtrl', function($scope, $http) { 
    $http.get("http://www.w3schools.com/angular/customers.php") 
    .success(function(data) { 
     $scope.records = data.records; 

     $scope.loadMore = function() { 
      $http.get("http: //www.w3schools.com/angular/customers.php") 
      .success(function(data) { 
       $scope.records = data.records; 
      }); 
     } 
     }); 
}); 

在我再次將$ HTTP請求loadMore()函數,但它不工作,所以任何幫助,您可以給被感激!

回答

0

有幾個問題。 loadMore()函數被定義在第一個$http得到的成功函數內。第二個問題是返回的數據替代$scope.records而不是添加到它。

var app = angular.module('myApp', ['infinite-scroll']); 
app.controller('customersCtrl', function($scope, $http) { 
    $http.get("http://www.w3schools.com/angular/customers.php") 
    .success(function(data) { 
     $scope.records = data.records; 
    }); 
    $scope.loadMore = function() { 
     $http.get("http: //www.w3schools.com/angular/customers.php") 
     .success(function(data) { 
      [].push.apply($scope.records, data.records); 
     }); 
    } 
}); 
+0

Rockstar,謝謝! –