Java Spring可分页：导航栏页面（按总页面）

我有一个Spring应用程序，我得到了一个作为Pageable对象的响应，我有一个包含结果的内容以及关于这些页面的更多信息，如下所示：

    data
:
content
:
(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
first
:
true
last
:
false
number
:
0
numberOfElements
:
10
size
:
10
sort
:
[{…}]
totalElements
:
674
totalPages
:
68

    var myApp = angular.module('myApp',[]);

myApp.controller('PoepleController', function($scope, $http) {
  $scope.mc = '';
  $scope.poeples = [];
  $scope.page=0;
  $scope.pages=[];
  $scope.size=10;
  $scope.response={};

  $scope.SearchPoeple = function(){
      $http.get("http://localhost:8080/poeples?page="+ $scope.page+"&size="+$scope.size+"&mc="+$scope.mc)
      .then(function(data){
          $scope.poeples = data.data.content;
          $scope.response = data;
          console.log(data);
          $scope.pages = Array(data.data.totalPages)
      }, function(err){
          console.log(err);
      });
  }
  $scope.SearchPoeple();
});

我想在我的桌子下面做一个导航条，上面有页数

我试过我的角度模块如下：

    data
:
content
:
(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
first
:
true
last
:
false
number
:
0
numberOfElements
:
10
size
:
10
sort
:
[{…}]
totalElements
:
674
totalPages
:
68

    var myApp = angular.module('myApp',[]);

myApp.controller('PoepleController', function($scope, $http) {
  $scope.mc = '';
  $scope.poeples = [];
  $scope.page=0;
  $scope.pages=[];
  $scope.size=10;
  $scope.response={};

  $scope.SearchPoeple = function(){
      $http.get("http://localhost:8080/poeples?page="+ $scope.page+"&size="+$scope.size+"&mc="+$scope.mc)
      .then(function(data){
          $scope.poeples = data.data.content;
          $scope.response = data;
          console.log(data);
          $scope.pages = Array(data.data.totalPages)
      }, function(err){
          console.log(err);
      });
  }
  $scope.SearchPoeple();
});

在我的html页面中，我试图在pages数组中重复我用响应的totalPages长度初始化的内容

</div>
    <div class="row">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li><a href="#" aria-label="Previous"> <span
                        aria-hidden="true">&laquo;</span>
                </a></li>
                <li ng-repeat="pge in pages track by $index"><a href="#">{{ &index }}</a></li>

                <li><a href="#" aria-label="Next"> <span
                        aria-hidden="true">&raquo;</span>
                </a></li>
            </ul>
        </nav>
    </div>

</div>

但它不起作用

也许这不是个好方法。有人可以帮我

我认为这是一个经典的需求

我的第二部分是在列表中限制5项。以及“上一步”和“下一步”按钮

---

谢谢

请尝试以下操作，如果这不是完整的解决方案，我将进行更新$http请求从调用它们的函数返回，因为它们返回承诺

$scope.searchpople=function（）{
返回$http
.get（“http://localhost:8080/poeples?page=“+$scope.page+”&size=“+$scope.size+”&mc=“+$scope.mc”）
.then（功能（数据）{
$scope.poeples=data.data.content；
$scope.response=数据；
控制台日志（数据）；
$scope.pages=新数组（data.data.totalPages）；
})
.catch（函数（err）{
控制台日志（err）；
});
};

---

您的Html页面出现语法错误。您必须更正$index而不是&index

@shmoolki你收到回复了吗？如果是这样，它看起来像什么？如果没有，你看到了什么错误？我有一个响应，但我也有这个错误：app.js:16 Object angular.min.js:124错误：[$parse:lexerr]at angular.min.js:7 at zc.throwerr（angular.min.js:227）at zc.lex（angular.min.js:224）at r.ast（angular.min.js:231）at xc.parse（angular.min.js:266）at angular.min.js:134 at h（angular.min.js:111）在oa（angular.min.js:82）在M（angular.min.js:66）在Va（angular.min.js:63）（匿名）@angular.min.js:124我已经更新了函数，不需要在响应的任何部分调用数组，不管类型如何。@shmoolki更新了，并不是要注释掉。只需要移除包装器。感叹号就可以了。它们的效果不太好。对不起，如果它只是一个值，我如何重复这个变量：

？