欢迎来到福编程网,本站提供各种互联网专业知识!

angular.js分页代码的实例

发布时间:2016-07-27 作者:投稿daisy 来源:转载
本文用实例详细给大家展示了angular.js分页代码,代码很详细,感兴趣的小伙伴们可以参考一下

对于大多数web应用来说显示项目列表是一种很常见的任务。通常情况下,我们的数据会比较多,无法很好地显示在单个页面中。在这种情况下,我们需要把数据以页的方式来展示,同时带有转到上一页和下一页的功能。现在在学习angular,使用angularjs 分页,基于 directive 实现,样式使用的 bootstrap,直接在 html代码中加入 标签即可调用。

先来看下效果图

实例代码

app.directive('pagePagination', function(){
  return {
    restrict : 'E',
    template : '
  • {{ pageRecord }} 条记录 / 共 {{ pageCount }}
', replace : true, scope : { "pageId" : "=", "pageRecord" : "=", "pageSize" : "=", "pageUrlTemplate" : "=" }, controller : ['$scope', function($scope){ $scope.getLink = function(pageId){ return $scope.pageUrlTemplate.replace("{PAGE}", pageId); }; $scope.getPageList = function(){ var page = []; var firstPage = parseInt(( $scope.pageId - 1 ) / $scope._pageSize ) * $scope._pageSize + 1; page.push({ name : '首页', style : $scope.pageId == 1 ? "disabled" : "", link : $scope.getLink(1) }); page.push({ name : '上一页', style : $scope.pageId == 1 ? "disabled" : "", link : $scope.getLink(1) }); for( var pageId = firstPage; pageId < firstPage + 10; pageId ++){ if( pageId >= 1 && pageId <= $scope.pageCount ){ page.push({ name : pageId, link : $scope.getLink(pageId), style : pageId == $scope.pageId ? "active" : "" }); } } page.push({ name : '下一页', style : $scope.pageId == $scope.pageCount ? "disabled" : "", link : $scope.getLink($scope.pageCount) }); page.push({ name : '尾页', style : $scope.pageId == $scope.pageCount ? "disabled" : "", link : $scope.getLink($scope.pageCount) }); return page; }; $scope.pageInit = function(){ if( !$scope.pageId || !$scope.pageRecord ){ setTimeout(function(){ $scope.$apply(function(){ $scope.pageInit(); }); }, 10); }else{ if( !!$scope.pageSize ){ $scope._pageSize = parseInt($scope.pageSize); }else{ $scope._pageSize = 10; } $scope.pageId = parseInt($scope.pageId); $scope.pageCount = parseInt(( $scope.pageRecord - 1 ) / $scope._pageSize ) + 1; if( $scope.pageId < 1 ){ $scope.pageId = 1; }else if( $scope.pageId > $scope.pageCount ){ $scope.pageId = $scope.pageCount; } $scope.pageLoad = true; $scope.pageList = $scope.getPageList(); } }; $scope.pageLoad = false; $scope.pageInit(); }] } });

调用代码:


以上就是angular.js分页代码的全部内容,希望对大家的学习有所帮助,也希望大家多多支持全福编程网。

相关推荐