[英]How Create Pagination with Angular.js and UI Bootstrap
Currently I implement a simple pagination with Angular.js and UIBootstrap but single show the first page uu I have the next code: 目前,我使用Angular.js和UIBootstrap实现了简单的分页,但是仅显示第一页,我有了下一个代码:
Index.html 的index.html
<div class="box-body table-responsive no-padding">
<table class="table table-hover" ng-controller="IndexCtrl">
<tr>
<th>Name</th>
<th>Email</th>
<th>Level</th>
<th>Actions</th>
</tr>
<tr ng-repeat="user in users| filter:search |startFrom:(currentPage - 1) * pageSize|limitTo: pageSize">
<td>@{{ user.name }}</td>
<td>@{{ user.email }}</td>
<td><span class="label label-success">@{{ user.level.permission }}</span></td>
<td>Bacon ipsum dolor sit amet salami venison chicken flank fatback doner.</td>
</tr>
</table>
</div><!-- /.box-body -->
<uib-pagination total-items="users.length" ng-model='currentPage' items-per-page='pageSize' boundary-links="true">
</uib-pagination>
Controller: 控制器:
var Suap = angular.module('Suap', ['ui.bootstrap']);
Suap.filter('startFrom',function(){
return function(data, start){
return data.slice(start);
}
})
.controller('IndexCtrl', function($scope, $http){
$scope.users = [],
$scope.pageSize=5,
$scope.currentPage=1;
$http({
method: 'GET',
url: '/route'
}).then(function(response) {
$scope.users = response.data;
});
})
Your pager is outside of the controller scope since you only set the controller on the <table>
您的寻呼机不在控制器范围内,因为您仅在<table>
上设置了控制器
You need to move ng-controller
higher up to an element that includes both your box-body
element and the <uib-pagination>
element 您需要将ng-controller
向上移动到一个既包含box-body
元素又包含<uib-pagination>
元素的元素
You need to bind all the page numbers to uib-pagination. 您需要将所有页码绑定到uib分页。 For this create a function inside the controller and set the scope of current page value dynamically from the function. 为此,在控制器内部创建一个函数,并从该函数动态设置当前页面值的范围。 Also you need to put the ng-controller directive to root element in order to get the pagination 另外,您还需要将ng-controller指令放置到root元素上以获得分页
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.