var app=angular.module('myApp', []); function githubController($scope,$http) { $http.get("https://api.github.com/users/mralexgray/repos") .success(function(response) {$scope.names = response;}); $scope.currentPage = 0; $scope.pageSize = 5; $scope.numberOfPages=function(){ return Math.ceil($scope.names.length/$scope.pageSize); } } //startFrom filter app.filter('firstPage', function() { return function(input, start) { start = +start; return input.slice(start); } });
<div ng-app="" ng-controller="githubController"> <table border="0" cellspacing="0" cellpadding="15"> <tr> <th width="23%">ID</th> <th>Name</th> </tr> <tr ng-repeat="x in names | firstPage:currentPage*pageSize | limitTo:pageSize"> <td>{{ x.id }}</td> <td>{{ x.name }}</td> </tr> <tr> <td>ID</td> <td>Name</td> </tr> </table> <div class="pagination"> <button ng-disabled="currentPage == 0" ng-click="currentPage=currentPage-1"><</button> <span>{{currentPage+1}}/{{numberOfPages()}}</span> <button ng-disabled="currentPage >= names.length/pageSize - 1" ng-click="currentPage=currentPage+1">></button> </div> </div>
*{ font-family: Arial; font-size:12px; } table{ text-align:left; width:100%; border-collapse: collapse; } table td{ border: 1px solid #C7C7C7; } table th{ background: #C7C7C7; color: #FFF; font-size: 13px; } .pagination{ margin: 20px 0; text-align: center; } .pagination button{ font-size: 24px; border-radius: 50%; border: 0; width: 30px; height: 30px; font-weight: normal; color: #FFF; cursor: pointer; display: inline-block; background: #C7C7C7; text-align: center; } .pagination button:focus{ outline:none; } .pagination span{ display: inline-block; margin: 0 0 10px 0; vertical-align: middle; } button:disabled { background: #ddd; cursor: default; } .credit{ background: #eee; padding: 10px; line-height: 180%; } .credit p{ margin: 0; }