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);
    }
    };
    }
    };
    });

  • 相关阅读:
    转载C#基础概念二十五问
    C# 文件路径、目录、I/O常见操作汇总
    最简单lru缓存及改进版本(java备忘)
    我的游戏观
    寂静岭 破碎的记忆
    居然又回来了,CSDN博客太不方便了
    Game Physics Engine Development 粗略翻译
    就这么定了
    绘画 程序 人生
    也谈Maxscript
  • 原文地址:https://www.cnblogs.com/shunzdd/p/5585997.html
Copyright © 2011-2022 走看看