这是官网上的一段代码:
<!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 : 指定一个模板。