用AngularJS分页? [英] Pagination with AngularJS?
本文介绍了用AngularJS分页?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经尝试过使用AngularJS进行分页，但是我无法实现某些功能，例如.
I've tried pagination with AngularJS but I'm not able to implement certain things, like.
我可以使用"下一个"和"上一个"进行导航，但不确定如何通过单击特定的"
I'm able to navigate through using the 'next' and 'previous' but am not sure how to achieve it by just clicking on that particular 'page number' button. And I also want to add focus to the particular 'page number' button on clicking 'next' and 'previous'
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);
}
});
有人可以帮我吗?
推荐答案
我认为您应该尝试首先，您需要在项目中包括该模块:
First you need to include the module in your project:
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
这篇关于用AngularJS分页?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
