码迷,mamicode.com
首页 > 其他好文 > 详细

angular+bootstrap分页指令案例

时间:2015-02-07 12:57:41      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:

AngularJS中不仅内置了许多指令,而且开发人员也可以通过自定义指令来完成特殊操作,指令创建成功后可以到处复用。

Web应用中的分页处理最为常见,我们可以将分页模块编写成一个可以复用的Angular指令,在使用时无需考虑指令的内部实现细节,像使用普通HTML元素一样简单。

1:index.html

<!DOCTYPE html>

<html ng-app="myApp">
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="../css/bootstrap.css"/>
    </head>
    <body>
        
        <div class="container" ng-controller="PageCtrl">
            <pagination num-pages="pages" curr-page="page" on-select-page="selectPage(page)"></pagination>
        </div>
        
    </body>
    
    <script src="../js/angular.js"></script>
    <script src="index.js"></script>
</html>

分页指令的使用如下:

<pagination num-pages="pages" curr-page="page" on-select-page="selectPage(page)"></pagination>

index.js

var myApp = angular.module(‘myApp‘, []);

myApp.controller(‘PageCtrl‘,[‘$scope‘, function($scope){
        $scope.pages = 10;
        $scope.page = 1;
        
        $scope.selectPage = function(page){
          console.log("选择的页:"+page);  
        };
}]);


myApp.directive(‘pagination‘, function(){
    return {
        restrict: ‘E‘,
        scope: {
            numPages: ‘=‘,     
            currPage: ‘=‘,
            onSelectPage: ‘&‘
        },
        
        template: ‘<ul class="pagination">‘
            +‘<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>‘
    
            +‘</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);
                }
            };
        }
    };
});

3:运行效果如下:

技术分享

技术分享

angular+bootstrap分页指令案例

标签:

原文地址:http://www.cnblogs.com/yshyee/p/4278587.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!