AngularJS分页几乎正常工作

时间:2016-07-02 17:49:51

标签: javascript angularjs twitter-bootstrap pagination

尝试使用AngularJS UI bootstrap pagination directive在小型搜索应用上完成分页。几乎让它工作除了在初始搜索后我无法获得前10个结果。

最初的100个结果会被加载并分成每页显示10个结果。但是,在分页并点击分页控件中的页面“1”链接后,前10个不显示UNTIL。

这是HTML

http://127.0.0.1:8000/

这是我的搜索功能,可以加载最初的100个结果

<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>

然后这些是我用于分页的函数

    $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);
        }
        }
    )
  };

我很确定这个问题的罪魁祸首是$ scope.search()中的这一行

    $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();
};

具体是等号......?

我还在学习js和angularjs,所以我不确定应该替换“=” ...以便显示最初的10个结果

2 个答案:

答案 0 :(得分:0)

$scope.results.documents似乎是包含您当前显示的文档的属性。一旦searchService返回其结果,您还需要设置它,而不仅仅是在单击分页时。

$scope.results.pagination是完整的结果数组;所以你想要像更换页面时那样切片。

答案 1 :(得分:0)

更改

await

) };

所以你确定,在你准备之后会发生分页。