kum*_*ded 2 pagination angularjs
我已经尝试过与AngularJS的分页但是我无法实现某些东西,比如.
我可以使用" 下一个 "和" 上一个 " 进行导航,但我不确定如何通过单击特定的" 页码 " 按钮来实现它.我也想将焦点添加到特定的" 页码 " 按钮,在点击" 下一个 "和" 前一 "
HTML代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app='myApp'>
Hello World
<div ng-controller="MyCtrl">
<ul>
<li ng-repeat="item in data | startFrom:currentPage*pageSize | limitTo:pageSize">
{{item}}
</li>
</ul>
<input type="image" src="images/btn_previous.png" alt="previous" ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1">
<button ng-click="currentPage = currentPage">
{{currentPage+1 <= numberOfPages()-2 && currentPage+1 || numberOfPages()-2}}
</button>
<button ng-click="currentPage = currentPage">
{{currentPage+2 <= numberOfPages()-1 && currentPage+2 || numberOfPages()-1}}
</button>
<button >
{{currentPage+3 <= numberOfPages() && currentPage+3 || numberOfPages()}}
</button> . . .
<button >
{{numberOfPages()}}
</button>
<input type="image" src="images/btn_next.png" alt="next" ng-disabled="currentPage >= data.length/pageSize - 1" ng-click="currentPage=currentPage+1">
</div>
</body>
</html>
使用Javascript:
var app=angular.module('myApp', []);
function MyCtrl($scope) {
$scope.currentPage = 0;
$scope.pageSize = 5;
$scope.data = [];
$scope.numberOfPages=function(){
return Math.ceil($scope.data.length/$scope.pageSize);
}
for (var i=0; i<45; i++) {
$scope.data.push("Item "+i);
}
}
app.filter('startFrom', function() {
return function(input, start) {
start = +start; //parse to int
return input.slice(start);
}
});
有人可以帮帮我吗？
我认为你应该尝试分页指令
首先,您需要在项目中包含该模块:
angular.module('myApp', ['angularUtils.directives.dirPagination']);
然后创建分页内容:
<ANY
dir-paginate="expression | itemsPerPage: (int|expression) [: paginationId (string literal)]"
[current-page=""]
[pagination-id=""]
[total-items=""]>
...
</ANY>
最后包括分页本身.
<dir-pagination-controls
[max-size=""]
[direction-links=""]
[boundary-links=""]
[on-page-change=""]
[pagination-id=""]
[template-url=""]>
</dir-pagination-controls>
这是工作的plunker
| 归档时间： |
|
| 查看次数： |
6297 次 |
| 最近记录： |