分页与AngularJS？

我试过用AngularJS分页，但我无法实现某些东西，比如。分页与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); 
    } 
});

有人可以帮我吗？

来源

2014-11-14 kumareloaded

我觉得你应该给尝试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

来源

2014-11-14 13:31:58 CrazyGeek

谢谢，但我需要在给定的代码中我的问题的解决方案。 – kumareloaded 2014-11-19 14:48:05

请给我一个活塞或小提琴。 – CrazyGeek 2014-11-19 14:49:23

http://plnkr.co/edit/MF3LZmKTXpEWvWM4HUHB?p=preview – kumareloaded 2014-11-19 14:58:58

下载dirPagination.js。。
现在包含dirPagination.js到您的页面。
你的模块中添加angularUtils.directives.dirPagination这样

VAR应用= 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>

使用该代码，因为它是，这会自动把

第一按钮，next，previous，last

并在点击按钮时自动关注第no页。

来源

2015-12-21 07:34:58

1）按照先按照上面的回答并下载，接下来

2）在视图页面

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

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

来源

2016-06-15 05:55:20

分页与AngularJS？

回答

相关问题