-
Notifications
You must be signed in to change notification settings - Fork 0
limitTo实现分页效果 #13
Open
Description
limitTo:param1:param2 (截取的长度:截取的起始坐标(索引值))
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>angular-limitTo实现分页</title>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<div ng-controller="myCtrl">
<ul class="list-group" style="width:20%;margin-top:20px;">
<li class="list-group-item" ng-repeat="arr in arrs|limitTo:2:pageNum">
name:{{arr.name}}
age:{{arr.age}}
</li>
</ul>
<nav aria-label="Page navigation">
<ul class="pagination">
<li ng-click="pre()">
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li ng-click="page(paginationNum)" ng-repeat="paginationNum in paginationNums" ng-class="{'active':paginationNum == pageNum/2+1}"><a href="#">{{paginationNum}}</a></li>
<li ng-click="next()">
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
</div>
</body>
<script src="js/angular.js"></script>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',['$scope','$http',function($scope,$http){
$scope.pageNum = 0;
$scope.limitNum = 2;
$scope.page = function(pageNum){
$scope.pageNum = (pageNum - 1)*2
}
$scope.pre = function(){
if($scope.pageNum == 0){
return false;
}
$scope.pageNum -= 2;
}
$scope.next = function(){
if($scope.pageNum == $scope.arrs.length - 2){
return false;
}
$scope.pageNum += 2;
}
$scope.arrs = [{
name:'aa',
age:1
},{
name:'bb',
age:2
},{
name:'cc',
age:3
},{
name:'dd',
age:4
},{
name:'ee',
age:5
},{
name:'ff',
age:6
},{
name:'gg',
age:7
},{
name:'tt',
age:8
}]
$scope.paginationNums = [];
var maxPage = Math.ceil($scope.arrs.length / 2);
for(var i=0;i<maxPage;i++){
$scope.paginationNums.push(i+1)
}
}])
</script>
</html>
Metadata
Metadata
Assignees
Labels
No labels