Question

我已经尝试过与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);
    }
});

有人可以帮帮我吗？

Answer 1

我认为你应该尝试Pagination Directive

首先，您需要在项目中包含该模块：

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

Answer 2

1）按照上面的答案跟随第一个，然后下载

2）在视图页面中添加这些div部分

<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）在控制器中添加这些。

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

与AngularJS分页？

2 个答案: