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

  • 相关阅读:
    Sky中国War3的旗帜
    2008流行趋势发布暨07届学生毕业秀(上海大学主办)
    随便写一下
    六一节——小朋友们快乐
    HEI
    Update my blog to improve my idea.
    由ipod引起的奇遇记
    加勒比海盗
    “老板娘”请客吃饭
    蚂蚁工坊
  • 原文地址:https://www.cnblogs.com/shunzdd/p/5585997.html
Copyright © 2020-2023  润新知