angular的分页代码示例

来源:互联网 发布:解放军纪律知乎 编辑:程序博客网 时间:2024/05/18 03:56


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://www.w3cschool.cc/try/angularjs/1.2.5/angular.min.js"></script>
<script src="http://cdn.bootcss.com/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.js"></script>
</head>
<body ng-app="myApp" style="background:#4A4A4A; overflow:hidden;" class="row" >
    <div style="color:#fff; font-size:30px; font-weight:bold; text-shadow:3px 3px 3px #ccc;-webkit-text-shadow:3px 3px 3px #ccc; text-align:center; margin-top:30px;"></div>
    <div class="row">
        <div ng-controller="pageDemo" class="col-md-6" style="margin:40px auto; float:none; background:#fff; padding:30px;">
            <h4>默认:</h4>
            <pagination boundary-links="true" total-items="totalItems" ng-model="currentPage" max-size = "maxSize" items-per-page="numPages" class="pagination-sm" previous-text="&lsaquo;" next-text="&rsaquo;" first-text="&laquo;" last-text="&raquo;" ng-change="select()">
          </pagination>
            
           其它属性:rotate = "false/true" ,direction-links="true/false"等等,
        </div>
    </div>
</body>
<script>
    angular.module('myApp',['ui.bootstrap']).controller('pageDemo',function($scope){  
        $scope.maxSize = 7;    //一个页面显示7页
        $scope.totalItems = 180;   //总共多少条数据
        $scope.currentPage = 1;     //文档加载后显示在第一页
        $scope.numPages = 18;        //每页存放多少条数据
        $scope.select = function(){    //一般用于点击那一页后调用接口
            alert($scope.currentPage);
        }
    })
</script>

</html>

哪儿做的不对的地方希望大家指出,http://www.cnblogs.com/woleicom/p/5632687.html具体请看高手写的

0 0
原创粉丝点击