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

  • 相关阅读:
    2,进程----multiprocessing模块介绍
    1,进程----进程理论知识
    对ORM的理解
    对queryset的理解
    个人总结-10-代码测试整合
    个人总结-9-session的使用,十天免登陆
    个人总结-8-重新写注册和登录界面
    个人总结-7- 实现图片在MySQL数据库中的存储,取出以及显示在jsp页面上
    从人机交互看对搜狗输入法的使用感受
    个人总结6-验证码制作总结
  • 原文地址:https://www.cnblogs.com/shunzdd/p/5585997.html
Copyright © 2011-2022 走看看