仅Angularjs分页显示1_Angularjs_Pagination

仅Angularjs分页显示1

angularjs pagination

仅Angularjs分页显示1,angularjs,pagination,Angularjs,Pagination,我无法对从我的$http返回的数据进行分页，它只显示1页。我明白这一点，但仍然不知道为什么它不分页的问题这是我的剧本 $scope.currentPage = 1; $scope.numPerPage = 2; $scope.maxSize = 5; $scope.makeTodos = function() { $scope.todos = response.data; //return of $http } $scope.makeTodos(); $scope.$watch('

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

这是我的剧本

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

这是响应的内部。数据

{"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"}
已编辑
这是我的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>

待办事项 {{todos.length}}总计 {{x.id} {{x.name} {{x.description}} {{x.field3}} {{x.field4}} {{x.field5}}
在分页组件中，只需在每页添加
项=/numPerPage'
属性，分页就会相应地工作
您的最终代码如下

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

下面是更新的示例
在分页组件中，只需在每页添加
items='numPerPage'
属性，分页就会相应地工作
您的最终代码如下

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

下面是更新的示例
您是否可以在html页面中显示您的代码您是否添加了
ui.bootstrap
作为依赖项？您是否在html代码中包含了
ui-bootstrap
？@SudhansuChoudhary是的，我添加了ui-bootstrapHtml代码。@ThanhTùng完成了添加的html可以在html页面中显示您的代码您是否添加了
ui.bootstrap
作为依赖项？您是否在html代码中包含了
ui引导程序
？@SudhansuChoudhary是的，我添加了ui引导程序的html代码，请。@ThanhTùng dong添加了html