如何使用Angular UI bootstrap制作Pager

在这篇文章中，我们将看到如何使用Angular UI bootstrap制作Dropdown。它是Angular UI开发者创建的一个AngularJS框架，用于提供更好的UI，可以很容易地使用。

语法:

<div uib-pager></div>

从链接中下载AngularUI：。

https://angular-ui.github.io/bootstrap

步骤:

首先，添加你的项目所需的Angular UI bootstrap脚本。

<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js”></script>
<script src=”https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js”></script>
<script src=”https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js”></script>

用它的UIBootStrap类制作寻呼机，这将为寻呼机设置UI外观。
现在使用不同的类制作不同类型的寻呼机并运行代码。

示例:

<!DOCTYPE html>
<html ng-app="gfg">
  
<head>
  
    <!-- Adding CDN scripts required for our page -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js">
    </script>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js">
    </script>
    <script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js">
    </script>
    <script src=
"https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js">
    </script>
  
    <script>
  
        // Adding Modules
        angular.module('gfg', ['ngAnimate', 
            'ngSanitize', 'ui.bootstrap']);
  
        angular.module('gfg').controller('pager', 
            function ( $scope) {$ scope.page = 10
            });
    </script>
  
    <link href=
"https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" 
        rel="stylesheet">
</head>
  
<body>
    <div ng-controller="pager">
  
        <!-- Making a pager -->
        <h4>GeeksforGeeks Pager</h4>
        <pre>This is {{page}}th page</pre>
        <ul uib-pager total-items="100" 
            ng-model="page">
        </ul>
    </div>
</body>
  
</html>

输出:

如何使用Angular UI bootstrap制作Pager？