zoukankan      html  css  js  c++  java
  • angular.js分页代码的实例

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

    先来看下效果图

    实例代码

     1 app.directive('pagePagination', function(){
     2   return {
     3     restrict : 'E',
     4     template : '<div class="pagination-box"><ul class="pagination"><li ng-class="page.style" ng-repeat="page in pageList"><a href="{{ page.link }}">{{ page.name }}</a></li></ul><ul class="pagination" ng-if="pageList[0]"><li class="page-count disabled"><span>共 <b>{{ pageRecord }}</b> 条记录 / 共 <b>{{ pageCount }}</b> 页</span></li></ul></div>',
     5     replace : true,
     6     scope : {
     7       "pageId"      : "=",
     8       "pageRecord"    : "=",
     9       "pageSize"     : "=",
    10       "pageUrlTemplate"  : "="
    11     },
    12     controller : ['$scope', function($scope){
    13         
    14       $scope.getLink = function(pageId){
    15         return $scope.pageUrlTemplate.replace("{PAGE}", pageId);
    16       };
    17   
    18       $scope.getPageList = function(){
    19         var page = [];
    20         var firstPage = parseInt(( $scope.pageId - 1 ) / $scope._pageSize ) * $scope._pageSize + 1;
    21         page.push({
    22           name  : '首页',
    23           style  : $scope.pageId == 1 ? "disabled" : "",
    24           link  : $scope.getLink(1)
    25         });
    26         page.push({
    27           name  : '上一页',
    28           style  : $scope.pageId == 1 ? "disabled" : "",
    29           link  : $scope.getLink(1)
    30         });
    31         for( var pageId = firstPage; pageId < firstPage + 10; pageId ++){
    32           if( pageId >= 1 && pageId <= $scope.pageCount ){
    33             page.push({
    34               name  : pageId,
    35               link  : $scope.getLink(pageId),
    36               style  : pageId == $scope.pageId ? "active" : ""
    37             });
    38           }
    39         }
    40         page.push({
    41           name  : '下一页',
    42           style  : $scope.pageId == $scope.pageCount ? "disabled" : "",
    43           link  : $scope.getLink($scope.pageCount)
    44         });
    45         page.push({
    46           name  : '尾页',
    47           style  : $scope.pageId == $scope.pageCount ? "disabled" : "",
    48           link  : $scope.getLink($scope.pageCount)
    49         });
    50         return page;
    51       };
    52   
    53       $scope.pageInit = function(){
    54         if( !$scope.pageId || !$scope.pageRecord ){
    55           setTimeout(function(){
    56             $scope.$apply(function(){
    57               $scope.pageInit();
    58             });
    59           }, 10);
    60         }else{
    61           if( !!$scope.pageSize ){
    62             $scope._pageSize = parseInt($scope.pageSize);
    63           }else{
    64             $scope._pageSize = 10;
    65           }
    66           $scope.pageId    = parseInt($scope.pageId);
    67           $scope.pageCount  = parseInt(( $scope.pageRecord - 1 ) / $scope._pageSize ) + 1;
    68           if( $scope.pageId < 1 ){
    69             $scope.pageId = 1;
    70           }else if( $scope.pageId > $scope.pageCount ){
    71             $scope.pageId = $scope.pageCount;
    72           }
    73           $scope.pageLoad   = true;
    74           $scope.pageList   = $scope.getPageList();
    75         }
    76       };
    77         
    78       $scope.pageLoad = false;
    79       $scope.pageInit();
    80     }]
    81   }
    82 });

    调用代码:

    1 <page-pagination
    2   page-id="pageId"
    3   page-record="recordCount"
    4   page-url-template="urlTemplate">
    5 </page-pagination>

    以上就是angular.js分页代码的全部内容,希望对大家的学习有所帮助。

  • 相关阅读:
    HBase入门笔记(四)完全分布式HBase集群安装配置
    is not in sudoer file
    PHP学习之八:执行运算符与字符加一
    Windows Phone 7回车键获取
    Asp.Net重定向
    WindowsPhone7开发之 Push+Notification
    Windows phone 7开发之(页面间跳转与传值)
    Windows Phone 7开发者注册Marketplace
    Windows Phone7开发之 容器控件
    Windows Phone7开发之 其他控件
  • 原文地址:https://www.cnblogs.com/softwyy/p/8684837.html
Copyright © 2011-2022 走看看