一个最简单的例子：
<html>
<head>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="accordionCtrl">
<uib-accordion close-others="oneAtATime">
<!-- 注意这里要用attr形式的，element形式不行 -->
<div uib-accordion-group class="panel-default" heading="Static Header, initially expanded" is-open="status.isFirstOpen"
is-disabled="status.isFirstDisabled">
This content is straight in the template.
</div>
</uib-accordion>
<script>
angular.module('myApp', ['ui.bootstrap']).controller('accordionCtrl', function ($scope)
{
$scope.oneAtATime = true;
$scope.status = {
isFirstOpen: true,
isFirstDisabled: false
};
});
</script>
</body>
</html>
效果如下：
先介绍一下标签中各属性的作用(有的在上面这个例子中还没有出现)
-
uib-accordion的属性：
close-others:默认true，是否同时只能打开一个
template-url:字符串(eg:head.html)，在ui-bootstrap-tpls.js文件中使用的模板名称 -
uib-accodrion-group的属性
heading:string(默认none)，面板标题
template-url:内容模板指向，可以指向当前文件内script标签的id，也可以指向一个新的文件，一般用内部script标签的形式，下面会有例子（重要）
is-disabled:默认false，面板是否禁用
is-open：默认false，面板初始状态（打开or关闭）
panel-class：面板样式（这个是class属性的值，不是属性名），默认panel-default.可用值：panel-primary, panel-success， panel-info,panel-warning,panel-danger
下面写几种常用写法。
-
配合ng-repeat生成面板
<html>
<head>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="accordionCtrl">
<uib-accordion close-others="oneAtATime">
<div uib-accordion-group class="panel-default" heading="{{ group.title }}"
is-disabled="status.isFirstDisabled" ng-repeat="group in groups">
{{ group.content }}
</div>
</uib-accordion><script> angular.module('myApp', ['ui.bootstrap']).controller('accordionCtrl', function ($scope) { $scope.groups = [ {title:'第一个面板',content:'第一个面板的内容'}, {title:'第二个面板',content:'第二个面板的内容'} ]; $scope.status = { isFirstOpen: true, isFirstDisabled: false }; $scope.oneAtATime = true; }); </script> </body> </html>
效果如图：
-
面板中包含动态生成的内容
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="accordionCtrl">
<uib-accordion close-others="oneAtATime">
<div uib-accordion-group class="panel-default" heading="点击按钮动态添加item"
is-disabled="status.isFirstDisabled">
<div ng-repeat="item in items">{{ item }}</div>
<button class="btn btn-success" ng-click="addItem()">点击添加item</button>
<button class="btn btn-success" ng-click="reduceItem()">点击删除item</button>
</div>
</uib-accordion><script> angular.module('myApp', ['ui.bootstrap']).controller('accordionCtrl', function ($scope) { $scope.groups = [ {title:'第一个面板',content:'第一个面板的内容'}, {title:'第二个面板',content:'第二个面板的内容'} ]; $scope.items = ["item 1","item 2","item 3"]; $scope.addItem = function(){ var newItemNo = $scope.items.length+1; $scope.items.push("item "+newItemNo); }; $scope.reduceItem = function(){ $scope.items.splice(-1,1); } $scope.status = { isFirstOpen: true, isFirstDisabled: false }; $scope.oneAtATime = true; }); </script> </body> </html>
效果如图：
点击按钮之后，面板内容增删，面板大小自适应。
-
使用自定义模板
uib-accordion-group默认的模板是uib/template/accordion/accordion-group.html，模板内容包含在ui-bootstrap-tpls-1.3.2.js文件中，可以参考原生的模板内容写一个自定义模板，然后用template-url来引用。
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="accordionCtrl">
<script type="text/ng-template" id="group-template.html">
<div class="panel {{panelClass || 'panel-default'}}">
<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 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>
</div>
</script><uib-accordion close-others="oneAtATime"> <div uib-accordion-group class="panel-default" heading="点击按钮动态添加item" is-disabled="status.isFirstDisabled" template-url="group-template.html"> <!-- heading与模板内的{{ heading绑定 }}--> <div ng-repeat="item in items">{{ item }}</div> <button class="btn btn-success" ng-click="addItem()">点击添加item</button> <button class="btn btn-success" ng-click="reduceItem()">点击删除item</button> </div> </uib-accordion> <script> angular.module('myApp', ['ui.bootstrap']).controller('accordionCtrl', function ($scope) { $scope.groups = [ {title:'第一个面板',content:'第一个面板的内容'}, {title:'第二个面板',content:'第二个面板的内容'} ]; $scope.items = ["item 1","item 2","item 3"]; $scope.addItem = function(){ var newItemNo = $scope.items.length+1; $scope.items.push("item "+newItemNo); }; $scope.reduceItem = function(){ $scope.items.splice(-1,1); } $scope.status = { isFirstOpen: true, isFirstDisabled: false }; $scope.oneAtATime = true; }); </script> </body> </html>
效果图：
可以看到样式已经改变为新定义的模板样式
-
使用自定义的面板标题
如果面板的标题是简单的字符串文本，使用heading属性就足够了，但是如果内容较为复杂，比如有图标，那么可以使用uib-accordion-heading来自定义标题。
<html>
<head>
<meta charset="utf-8">
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<style>
.accordion-toggle { display: block; }
</style>
</head>
<body ng-app="myApp" ng-controller="accordionCtrl"><uib-accordion close-others="oneAtATime" is-open="status.open"> <div uib-accordion-group class="panel-default" ng-click="$event.stopPropagation()" is-disabled="status.isFirstDisabled" is-open="status.open"> <!--自定义面板标题，注意在uib-accordion里定义了is-open=status.open，然后可以通过开关状态来改变字体图标--> <uib-accordion-heading> 自定义的面板标题 <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> </uib-accordion-heading> <!-- 面板内容部分 --> <div ng-repeat="item in items">{{ item }}</div> <button class="btn btn-success" ng-click="addItem()">点击添加item</button> <button class="btn btn-success" ng-click="reduceItem()">点击删除item</button> </div> </uib-accordion> <script> angular.module('myApp', ['ui.bootstrap']).controller('accordionCtrl', function ($scope) { $scope.groups = [ {title:'第一个面板',content:'第一个面板的内容'}, {title:'第二个面板',content:'第二个面板的内容'} ]; $scope.items = ["item 1","item 2","item 3"]; $scope.addItem = function(){ var newItemNo = $scope.items.length+1; $scope.items.push("item "+newItemNo); }; $scope.reduceItem = function(){ $scope.items.splice(-1,1); } $scope.status = { isFirstOpen: true, isFirstDisabled: false }; $scope.oneAtATime = true; }); </script> </body> </html>
在实际使用中，如果想在点击每个面板标题时就展开控件，而不是点击文字才展开，那么加入这个样式：
.accordion-toggle { display: block; }
如果想在面板标题中加入可点击的元素（按钮，复选框等），并且点击这些元素时不展开控件，那么要在这些元素上阻止事件冒泡：
ng-click="$event.stopPropagation()"
网友评论