首页 > 代码库 > angular 使用ui.bootstrap的分页

angular 使用ui.bootstrap的分页

2024-08-14 07:35:38   220人阅读

在下才疏学浅，不足之处，还请大家指正。

代码如下

<!DOCTYPE html><html lang="en" ng-app="indexApp"><head>    <meta charset="UTF-8">    <title>Title</title>    <link rel="stylesheet" href="http://www.mamicode.com/js/bootstrap.css">    <script src="http://www.mamicode.com/js/angular.js"></script>    <script src="http://www.mamicode.com/js/ui-bootstrap-tpls-1.3.3.min.js"></script>    <style>        .pagination {            margin: 0 !important;        }    </style></head><body ng-controller="indexCtrl"><h4>分页</h4><div class="col-sm-6">    <footer class="panel-footer">        <div class="row">            <div class="col-sm-3 hidden-xs">                <select                        class="input-sm form-control w-sm inline v-middle"                        ng-model="placement.selected"                        ng-options="o as o for o in placement.options"                        ng-change="placement.changeFn()"                >                </select>            </div>            <div class="col-sm-9 text-right text-center-xs">                <div class="pagination pagination-sm m-t-none m-b-none">                    <ul uib-pagination boundary-links="true" total-items="totalItems"                        ng-model="currentPage" class="pagination-sm"                        max-size="maxSize"                        previous-text="&lsaquo;" next-text="&rsaquo;"                        first-text="&laquo;" last-text="&raquo;"></ul>                </div>            </div>        </div>    </footer>    <br><br>    当前在第{{currentPage}}页，页面有{{placement.selected}}个元素。    <br><br>    <button type="button" class="btn btn-info" ng-click="setPage(3)">跳转到: 3</button></div><script>    angular.module(‘indexApp‘,[‘ui.bootstrap‘])            .controller(‘indexCtrl‘, function ($scope, $log) {                //下拉菜单                $scope.placement = {                    options: [5,10,20,50],                    pageSize:5,                    selected: 20,                    changeFn:function(){                        //执行的函数                        console.log($scope.selected);                    }                };                //翻页                $scope.totalItems = 1000;    //所有页面中的项目总数                $scope.currentPage = 4;     //当前页                $scope.setPage = function (pageNo) {                    $scope.currentPage = pageNo;                };                $scope.maxSize = 5;            });</script></body></html>

执行效果如下

技术分享

 

angular 使用ui.bootstrap的分页


联系
我们