极客教程如何使用Angular UI Bootstrap制作Dropdown
在这篇文章中，我们将看到如何使用Angular UI Bootstrap制作Dropdown。Angular UI Bootstrap是一个Angular JS框架，由Angular UI开发者创建，用于提供更好的UI，可以轻松使用。
语法:
<div uib-dropdown></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('button', function ($scope) {
});
</script>
<link href=
"https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body>
<div ng-controller="button">
<!-- making a dropdown -->
<div class="btn-group" uib-dropdown>
<button type="button" class="btn btn-success">Click</button>
<button type="button" class="btn btn-success" uib-dropdown-toggle>
<span class="caret"></span>
</button>
<ul class="dropdown-menu"
uib-dropdown-menu role="menu"
aria-labelledby="split-button">
<li role="menuitem">1st</li>
<li role="menuitem">2nd</li>
<li role="menuitem">3rd</li>
<li role="menuitem">5th</li>
</ul>
</div>
<div class="btn-group" uib-dropdown>
<button type="button"
class="btn btn-danger">Click</button>
<button type="button"
class="btn btn-danger" uib-dropdown-toggle>
<span class="caret"></span>
</button>
<ul class="dropdown-menu"
uib-dropdown-menu role="menu"
aria-labelledby="split-button">
<li role="menuitem">1st</li>
<li role="menuitem">2nd</li>
<li role="menuitem">3rd</li>
<li role="menuitem">5th</li>
</ul>
</div>
<div class="btn-group" uib-dropdown>
<button type="button" class="btn btn-warning">Click</button>
<button type="button"
class="btn btn-warning"
uib-dropdown-toggle>
<span class="caret"></span>
</button>
<ul class="dropdown-menu"
uib-dropdown-menu role="menu"
aria-labelledby="split-button">
<li role="menuitem">1st</li>
<li role="menuitem">2nd</li>
<li role="menuitem">3rd</li>
<li role="menuitem">5th</li>
</ul>
</div>
</div>
</body>
</html>
输出:
