AngularJS的客户端分页

Question

更新

我曾经认为，当简单地尝试过滤（一次 10 个）使用 Elasticsearch 和 AngularJS 的简单搜索应用程序的前 100 个结果时，我的客户端分页会是最好的。从那以后我读了很多书，似乎很多人都提倡服务器端的方法......

如果我的控制器中有这个分页代码

    $scope.getNextPage = function() {
    $scope.resultsPage++;
    getResults();
  };


    $scope.$watchGroup(['results', 'noResults', 'isSearching'], function() {
        var documentCount = $scope.results.documentCount;

    if (!documentCount || documentCount <= $scope.results.documents.length || $scope.noResults || $scope.isSearching) {
      $scope.canGetNextPage = false;
    } 
    else {
      $scope.canGetNextPage = true;
    }
  });

这导致“无限滚动”选项变得越来越流行。我如何将无限滚动“转换”为更传统的“逐页”分页（如 Google 和 Bing）选项。我已经尝试了很多东西，但似乎无法让它发挥作用。现在我开始认为这与结果的加载方式有关

if (totalHits > 0) {
      $scope.results.documentCount = totalHits;
      $scope.results.documents.push.apply($scope.results.documents, searchService.formatResults(es_return.hits.hits));...

我尝试将“push.apply”换成 js 中的 slice 方法，但这不起作用。我什至拿出了 $scope.resultspage++; getNextPage() 但这也没有效果。

是那一行的问题...我如何转换此代码以进行“传统”分页？

旧版

我正在尝试在一个使用 Elasticsearch 和 AngularJS 的小型搜索应用程序上进行分页。还使用 AngularJS UI Bootstrap 进行分页 - 无论如何都要尝试。

我已经通读了这个popular thread 并且几乎已经安装了它，但是它不起作用，我似乎无法弄清楚为什么。具体来说，分页确实会显示，但单击按钮不会执行任何操作（它不会过滤到下一组结果）。

我正在将前 1000 个结果加载到 UI，然后尝试过滤这些结果。

我的 HTML div 是：

<uib-pagination class="pagination" ng-if="results.documentCount > 10" ng-model="currentPage" max-size="maxSize" total-items="results.documentCount" items-per-page="itemsPerPage" direction-links="true">

我对结果列表的 ng-repeat 是这样的：

<li ng-repeat="page in results.documents">
    <a href="{{page.url}}"><span ng-bind-html="page.title"></span></a><br />
    <span ng-bind-html="page.url"></span>
    <p ng-bind-html="page.content"></p>
  </li>

而我的分页js是：

$scope.currentPage = 1;
  $scope.itemsPerPage = 10;
  $scope.totalItems = 1000;
  $scope.noOfPages = Math.ceil(($scope.totalItems / $scope.itemsPerPage) / 10);
  $scope.maxSize = $scope.noOfPages;
  $scope.paginationList = [];

    $scope.$watch("currentPage + itemsPerPage", updatePagination);

  makePagination();

  ////

   var updatePagination = function() {
    var begin = (($scope.currentPage -1) * $scope.itemsPerPage),
      end = begin + $scope.itemsPerPage;

      $scope.results.documents = $scope.paginationList.slice(begin, end);
  };

  var makePagination = function() {
    var i;
    var page = $scope.results.documents;
    $scope.paginationList = [];
    for (i=1; i <= 1000; i++) {
      $scope.paginationList.push(i)
    }
  };

我很确定它与$scope.paginationList.push(i) 部分有关，因为我不太确定该放什么，因为我的 ng-repeat 是怎样的，它比答案中给出的其他示例更复杂.

Answer 1

我认为这是因为 makePagination() 和 updatePagination() 没有在您第一次调用它们的地方定义。您可以将函数定义移到调用它的位置上方，也可以使用这样的命名函数

function makePagination() {
...
}

见http://adripofjavascript.com/blog/drips/variable-and-function-hoisting