AngularJS分页几乎可以正常工作

Question

Trying to finish pagination on a small search app using AngularJS UI bootstrap pagination directive . Nearly have it working EXCEPT that I can not get the first 10 results to display after the initial search.

What happens is the initial 100 results are loaded and they are split to display 10 per page. However, the first 10 do not appear UNTIL after you paginate some and click on the page "1" link in the pagination control.

This is the HTML

<uib-pagination total-items="results.totalItems" max-size="10" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="changePage()" direction-links="true" previous-text="&lsaquo;" next-text="&rsaquo;" class="pagination-sm"></uib-pagination>

This is my search function that loads the initial 100 results

    $scope.search = function() {
    $scope.isSearching = true;
    return searchService.search($scope.searchTerms, $scope.currentPage).then(function(es_return) {      
      var totalItems = es_return.hits.total;
      var totalTime = es_return.took;
      var numPages = Math.ceil(es_return.hits.total / $scope.itemsPerPage);
      $scope.results.pagination = [];
      for (var i = 1; i <= 100; i++) {
        if(totalItems > 0) 
        $scope.results.totalItems = totalItems;
        $scope.results.queryTime = totalTime;
        $scope.results.pagination = searchService.formatResults(es_return.hits.hits);
        }
        }
    )
  };

And then these are the functions I'm using for pagination

    $scope.paginate = function() {
    var begin = (($scope.currentPage - 1) * $scope.itemsPerPage);
    var end = begin + $scope.itemsPerPage;
    $scope.results.documents = $scope.results.pagination.slice(begin, end);
  };


$scope.changePage = function() {
  $scope.paginate();
};

I'm pretty sure the culprit to this problem is this line in $scope.search()

$scope.results.pagination "=" searchService.formatResults(es_return.hits.hits);

specifically the equal sign ...?

I'm still learning js and angularjs so I'm not really sure what should replace the "=" ... so that the initial 10 results appear

Answer 1

$scope.results.documents seems to be the property holding your currently displayed documents. You also need to set it once searchService returned its results, not just when clicking on the pagination.

$scope.results.pagination is the full array of results; so you want to slice that just like when changing page.

Answer 2

Change

) };

to ).then((){$scope.paginate();}); } ).then((){$scope.paginate();}); }

So you are sure, that pagination happens after you prepared it.