Question

我无法对从 $ http 返回的数据进行分页，它只显示1页。我遵循这个plunker，但仍然不知道为什么它不分页的问题。

这是我的剧本

$scope.currentPage = 1;
$scope.numPerPage = 2;
$scope.maxSize = 5;

$scope.makeTodos = function() {
    $scope.todos = response.data; //return of $http
}
$scope.makeTodos();

$scope.$watch('currentPage + numPerPage', function() {
    var begin = (($scope.currentPage - 1) * $scope.numPerPage);
    var end = begin + $scope.numPerPage;

    $scope.names = $scope.todos.slice(begin, end);
    console.log($scope.todos.slice(begin, end));
});

这是 response.data

的内部

{"id":"1","name":"name 1","description":"description 1","field3":"field3 1","field4":"field4 1","field5 ":"field5 1"}, 
{"id":"2","name":"name 2","description":"description 1","field3":"field3 2","field4":"field4 2","field5 ":"field5 2"}, 
{"id":"3","name":"name 3","description":"description 1","field3":"field3 3","field4":"field4 3","field5 ":"field5 3"}, 
{"id":"4","name":"name 4","description":"description 1","field3":"field3 4","field4":"field4 4","field5 ":"field5 4"}, 
{"id":"5","name":"name 5","description":"description 1","field3":"field3 5","field4":"field4 5","field5 ":"field5 5"}, 
{"id":"6","name":"name 6","description":"description 1","field3":"field3 6","field4":"field4 6","field5 ":"field5 6"}, 
{"id":"7","name":"name 7","description":"description 1","field3":"field3 7","field4":"field4 7","field5 ":"field5 7"}, 
{"id":"8","name":"name 8","description":"description 1","field3":"field3 8","field4":"field4 8","field5 ":"field5 8"}, 
{"id":"9","name":"name 9","description":"description 1","field3":"field3 9","field4":"field4 9","field5 ":"field5 9"}, 
{"id":"10","name":"name 10","description":"description 1","field3":"field3 10","field4":"field4 10","field5 ":"field5 10"}

EDITED

这是我的HTML

<body ng-controller="TodoController">
    <h1>Todos</h1>
    <h4>{{todos.length}} total</h4>
    <ul ng-repeat="x in names">
      <li>{{x.id}}</li>
      <li>{{x.name}}</li>
      <li>{{x.description}}</li>
      <li>{{x.field3}}</li>
      <li>{{x.field4}}</li>
      <li>{{x.field5}}</li>
    </ul>
    <pagination 
      ng-model="currentPage"
      total-items="names.length"
      max-size="maxSize"  
      boundary-links="true">
    </pagination>
  </body>

Answer 1

在您的分页组件中，只需添加items-per-page='numPerPage'属性，您的分页就会相应地运作

您的最终代码将是

<pagination 
      ng-model="currentPage"
      total-items="names.length"
      items-per-page='numPerPage'
      max-size="maxSize"  
      boundary-links="true">
</pagination>

以下是更新示例Plunker

Angularjs分页只显示1

1 个答案: