Угловой JS ngInfiniteScroll с LimitTo

Question

Я использую ngInfiniteScroll ng-module для разбивки на страницы. Когда я просматриваю страницу, я добавляю 20 записей в свою таблицу данных. Делая это, я на самом деле выполняю HTTP-запрос каждый раз («не подходит для производительности»).

Я занимался некоторыми исследованиями и сталкивался с добавлением LimitTo с ngInfiniteScroll. Не знаю, как реализовать это. Может кто-то пожалуйста, дайте мне какие-либо предложения.

<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-запрос каждый раз, когда вы хотите загрузить больше. Если пользователь обычно прокручивает все элементы, то загрузка всех данных сразу может быть тем, что вы хотите.