可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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 Code:

<!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);
    }
});

Can someone please help me?

回答1:

I think you should give try to Pagination Directive

First you need to include the module in your project:

angular.module('myApp', ['angularUtils.directives.dirPagination']);

Then create the paginated content:

<ANY
dir-paginate="expression | itemsPerPage: (int|expression) [: paginationId (string literal)]"
[current-page=""]
[pagination-id=""]
[total-items=""]>
...
</ANY>

And finally include the pagination itself.

<dir-pagination-controls
[max-size=""]
[direction-links=""]
[boundary-links=""]
[on-page-change=""]
[pagination-id=""]
[template-url=""]>
</dir-pagination-controls>

here is working plunker

回答2:

Download dirPagination.js from here. .
Now include dirPagination.js to your page.
Add angularUtils.directives.dirPagination in your module like this

var app = angular.module("myApp", ['angularUtils.directives.dirPagination']);

4.we use dir-paginate directive for pagination  add dir-paginate in tr tag

<tr dir-paginate="event in events|orderBy:['id', 't']:true |
     itemsPerPage: 5">

5.Add below given code anywhere on your page or where ever you want


 <dir-pagination-controls
            max-size="5"
            direction-links="true"
            boundary-links="true" >
        </dir-pagination-controls>

Use this code as it is ,this will automatically put buttons of

first, next ,previous ,last

and focuses automatically on page no when clicks on button.

回答3:

1) Follow the first as per above answer and download it , next

2) Add these div part in your view page

<div ng-controller="PagenationController"
class="other-controller">
 <div class="text-center">
  <dir-pagination-controls boundary-links="true"
  on-page-change="pageChangeHandler(newPageNumber)"
   template-url="app/views/dirPagination.html"></dir-pagination-controls>
  </div>
</div>

3) Add these in your controller.

 app.controller('PagenationController', PagenationController);
 function PagenationController($scope) {
  $scope.pageChangeHandler = function(num) {
      };
$scope.currentPage = 1;
$scope.pageSize;
$scope.add = true;
 $scope.pageChangeHandler = function(num) {
         };
}