這是官網上的一段代碼：
<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
<meta charset="UTF-8">
<title>accordion_demo</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-animate.min.js"></script>
<script type="text/javascript" src="js/ui-bootstrap-tpls-2.1.4.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript">
var app = angular.module('app',['ui.bootstrap']);
app.controller('MyCtrl', function($scope){
$scope.oneAtTime = true;
$scope.groups = [
{
title: 'Dynamic Group Header -1',
content: 'Dynamic Group body -1'
},
{
title: 'Dynamic Group Header -2',
content: 'Dynamic Group Body -2'
}
];
$scope.items = ['Item 1', 'Item2', 'Item3'];
$scope.addItem = function(){
var newItemNo = $scope.items.length + 1;
$scope.items.push('Item '+ newItemNo);
}
$scope.status = {
isCustomHeaderOpen: false,
isFirstOpen: true,
isFirstDisabled: false
}
})
</script>
</head>
<body ng-controller="MyCtrl">
<p>
<button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
<button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = !status.isFirstDisabled">Enable/Disable first panel</button>
</p>
<div uib-accordion close-others="oneAtTime">
<div uib-accordion-group class="" heading="Static Header, initially expanded"
is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
This content is straight in the template.
</div>
<div uib-accordion-group class="panel-default" heading="{{group.title}}" ng-repeat="group in groups">
{{group.content}}
</div>
<div uib-accordion-group class="panel-default" heading="Dynamic Body Content">
<p>The body of the uib-accordion group grows to fit the contents</p>
<button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
<div ng-repeat="item in items">{{item}}</div>
</div>
<div uib-accordion-group class="panel-default" heading="Custom template" template-url="group-template.html">
Hello
</div>
<div uib-accordion-group class="panel-default" is-open="status.isCustomHeaderOpen" template-url="group-template.html">
<uib-accordion-heading>
Custom template with custom header template
<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down':status.isCustomHeaderOpen, 'glyphicon-chevron-right':!status.isCustomHeaderOpen}"></i>
</uib-accordion-heading>
World
</div>
<div uib-accordion-group class="panel-danger" heading="Delete account">
<p>Please, to delete your account, click the button below</p>
<button class="btn btn-danger">Delete</button>
</div>
<div uib-accordion-group class="panel-default" is-open="status.open">
<uib-accordion-heading>
I can have markup, too!<i class="pull-right glyphicon" ng-class="{'glyphicon-cheron-down':status.open, 'glyphicon-chevron-right':!status.open}"></i>
</uib-accordion-heading>
This is just some content to illustrate fancy headings.
</div>
<div uib-accordion-group class="panel-default" heading="test for accordion">
<pre>
hei!hei!hei!
hei!hei!hei!
</pre>
</div>
</div>
<script type="text/ng-template" id="group-template.html">
<div class="panel-heading">
<h4 class="panel-title" style="color:#fa39c3">
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
<span uib-accordion-header ng-class="{'text-muted': isDisabled}">
{{heading}}
</span>
</a>
</h4>
</div>
<div class="panel-collapse collapse" uib-collapse="!isOpen">
<div class="panel-body" style="text-align: right" ng-transclude></div>
</div>
</script>
</body>
</html>主要的效果是顯現一個類似面板的摺疊，點擊標題就會在下方展開內容。效果如圖所示：
這個UI指令由兩個指令構成：ui-accordion、ui-accordion-group。
需要注意的是ui-accordion-group必須包含在ui-accordion中，否則會報錯。
ui-accordion中包含兩個屬性：
1、close-others表示的是在ui-accordion包含的ui-accordion-group在同一個時刻，只能有一個處於被展開的狀態。也就是說，當你點開某一個ui-accordion-group的時候，其他的則會被關閉。
2、template-url
在ui-accordion-group中包含了四個屬性：
1、heading:指定標題，也就是你點擊的部分，當你點擊後，下面的內容會被展開。
2、is-disabled：指定這個ui-accordion-group是否被禁用，也就是是否能被展開。
3、is-open: 這個ui-accordion-group的展開狀態，通過這個屬性可以設置它的打開和關閉。
4、template-url : 指定一個模板。