zoukankan      html  css  js  c++  java
  • angularjs前端分页自定义指令pagination

    在table的后面:
    <div class="panel-footer">
    <nav class="pull-right">
    <pagination num-pages="pages" curr-page="page" on-select-page="selectPage(page)"></pagination>
    </nav>
    </div>

    js里面
    .directive('pagination', function(){
    return {
    restrict: 'E',
    scope: {
    numPages: '=',
    currPage: '=',
    onSelectPage: '&'
    },

    template: '<ul class="pagination">'
    +'<li ng-class="{disabled: noPreviousPage()}">'
    +'<a ng-click="selectPage(1)">首页</a>'
    +'</li>'

    +'<li ng-class="{disabled: noPreviousPage()}">'
    +'<a ng-click="selectPreviousPage()">上一页</a>'
    +'</li>'

    +'<li ng-repeat="page in pages" ng-class="{active: isActivePage(page)}">'
    +'<a ng-click="selectPage(page)">{{page}}</a>'
    +'</li>'

    +'<li ng-class="{disabled: noNextPage()}">'
    +'<a ng-click="selectNextPage()">下一页</a>'
    +'</li>'

    +'<li ng-class="{disabled: noNextPage()}">'
    +'<a ng-click="selectPage(pages.length)">尾页</a>'
    +'</li>'

    +'</ul>',

    replace: true,
    link: function(s){
    s.$watch('numPages', function(value){
    s.pages = [];

    for(var i=1;i<=value;i++){
    s.pages.push(i);
    }

    if(s.currPage > value){
    s.selectPage(value);
    }
    });

    //判读是否有上一页
    s.noPreviousPage = function(){
    return s.currPage === 1;
    };

    //判断是否有下一页
    s.noNextPage = function(){
    return s.currPage === s.numPages;
    };

    //判断当前页是否被选中
    s.isActivePage = function(page){
    return s.currPage===page;
    };

    //选择页数
    s.selectPage = function(page){
    if(!s.isActivePage(page)){
    s.currPage = page;

    s.onSelectPage({ page:page });
    }
    };

    //选择下一页
    s.selectNextPage = function(){
    if(!s.noNextPage()){
    s.selectPage(s.currPage+1);
    }
    };

    //选择上一页
    s.selectPreviousPage = function(){
    if(!s.noPreviousPage()){
    s.selectPage(s.currPage-1);
    }
    };
    }
    };
    });

  • 相关阅读:
    如何获取显示器的EDID信息
    VGA
    RK3288 GMAC整理
    基于嵌入式Linux的千兆以太网卡驱动程序设计及测试
    module_param和module_param_array用法
    OSI七层协议模型、TCP/IP四层模型学习笔记
    999
    git
    最小生成树 (Minimum Spanning Tree,MST) --- Kruskal算法
    并查集 (Disjoint Set)
  • 原文地址:https://www.cnblogs.com/shunzdd/p/5585997.html
Copyright © 2011-2022 走看看