Angular JS ngInfiniteScroll LimitTo

Question

我爲我的分頁使用ngInfiniteScroll ng-module。當我向下滾動頁面時，我將20條記錄添加到我的數據表中。通過這樣做，我實際上每次都運行一個http請求（「對性能不好）」。

我一直在做一些研究，並且遇到了使用ngInfiniteScroll添加LimitTo。不確定如何實現這個。可能有人請給我任何建議。

<table infinite-scroll='tF.loadMore()' infinite-scroll-disabled='tF.isBusy' infinite-scroll-distance='3' class="responsive"> 
      <thead> 
       <tr> 
        <th>FIRST NAME</th> 
        <th>LAST NAME</th> 
        <th>USERNAME</th> 
        <th>EMAIL</th> 
        <th>CREATED DATE</th> 
        <th>STATUS</th> 
        <th>IS ONLINE</th> 
        <th>ACTIONS</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr ng-repeat="item in tF.items | filter:searchFilter"> 
        <td>{{item.FirstName}}</td> 
        <td>{{item.LastName}}</td> 
        <td>{{item.Username}}</td> 
        <td>{{item.Email}}</td> 
        <td>{{item.CreatedDate | date:'medium'}}</td> 
        <td></td> 
        <td></td> 
        <td></td> 
       </tr> 
      </tbody> 
      <tfoot ng-show='tF.isBusy'> 
       <tr> 
        <td colspan="9"><spinner show="tF.isBusy" /><span class="bold">{{tF.status}}</span> </td> 
       </tr> 
      </tfoot> 
     </table> 

/**** CONTROLLER.JS *****/

var vm = this; 
    var page = 0; 
    vm.items = []; 
    vm.isBusy = false; 

    vm.loadMore = function() 
    { 
     if(vm.isBusy) return; 
     vm.isBusy = true; 

     userService.GetAllRecords(page) 
     .success(function (data) 
     { 
      var results = data; 

      for (var i = 0; i < results.length; i++) 
      { 
       vm.items.push(results[i]); 
      } 

      page++; 
      vm.isBusy = false; 

     }.bind(vm)) 
     .error(function (error) 
     { 
      vm.status = 'Error retrieving data! ' + error.message; 
     }) 
     .finally(function() 
     { 
      vm.isBusy = false; 
     }); 
    } 

Answer 1

我已經使用這個模塊自己在幾個應用程序，這是您如何限制通話只能運行一次，直到您的數據已被退回

個

js代碼

vm.isBusy = false; 

vm.loadMore = function() { 
    vm.isBusy = true; 

    userService.GetAllRecords(page).success(function(data) { 
     var results = data; 

     for (var i = 0; i < results.length; i++) { 
      vm.items.push(results[i]); 
     } 

     page++; 
     vm.isBusy = false; 
    }); 
} 

模板代碼

<div infinite-scroll="loadMore()" infinite-scroll-distance="0" infinite-scroll-disabled="isBusy"></div> 

-

這是我寫的我最後一次使用此模塊的代碼。

<div infinite-scroll="loadMoreArticles()" infinite-scroll-distance="0" infinite-scroll-disabled="loadingArticles"></div> 

$scope.loadingArticles = false; 

$scope.loadMoreArticles = function() { 
    $scope.loadingArticles = true; 

    return articlesFactory.getArticles($stateParams.feedType || 'feed', $stateParams.feed, lastArticle.id).then(function(data) { 
     $scope.articles = _.union($scope.articles, data); 
     if (data.length > 0) { 
      $scope.loadingArticles = false; 
     } 
    }); 
}; 

Answer 2

你可以加載所有數據一次，並附加件，同時滾動：

var vm = this; 
var page = 0; 
vm.currentItems = []; 
var allData = [], 
    step = 10; 

vm.loadData = function() 
{ 
    userService.GetAllRecords(page) 
    .success(function (data) 
    { 
     allData = data; 
     vm.loadMore(); // Set first 10 items 
    }) 
    .error(function (error) 
    { 
     vm.status = 'Error retrieving data! ' + error.message; 
    }); 
} 

vm.loadMore = function() { 
    // Add more items to the currentItems 
    vm.currentItems = vm.currentItems.concat(allItems.slice(page*step, step)); 
    page++; 
} 

vm.loadData(); 

但是這取決於你想要達到你爲什麼會想這樣的東西。如果用戶大多數時間只需要查看前10項內容，那麼我建議每次要載入更多內容時都要執行http請求。如果用戶通常滾動瀏覽所有項目，那麼一次加載所有數據可能是您想要的。