AngularJs的UI组件ui-Bootstrap分享（三）——Accordion
Accordion手风琴控件使用uib-accordion和uib-accordion-group指令。
<script>
angular.module('myApp', ['ui.bootstrap']).controller('AccordionDemoCtrl', function ($scope) {
$scope.oneAtATime = true;
$scope.status = {
isFirstOpen: true,
isFirstDisabled: false
};
});
</script>
<uib-accordion close-others="oneAtATime">
<uib-accordion-group heading="标题" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
内容...
</uib-accordion-group>
</uib-accordion>
效果为：
uib-accordion的属性:
|
属性名称 |
默认值 |
说明 |
|
close-others |
true |
展开一个面板时是否关闭其他面板 |
|
template-url |
template/accordion/accordion.html |
在ui-bootstrap-tpls-1.3.2.js文件中使用的模板名称 |
uib-accordion-group的属性:
|
属性名称 |
默认值 |
说明 |
|
heading |
none |
面板头部的标题 |
|
is-disabled |
false |
面板是否禁用 |
|
is-open |
false |
面板是否展开 |
|
panel-class |
panel-default |
可以使用Bootstrap的样式,如panel-primary, panel-success, panel-info,panel-warning,panel-danger等。必须为字符串。 |
|
template-url |
uib/template/accordion/accordion-group.html |
在ui-bootstrap-tpls-1.3.2.js文件中使用的模板名称 |
上例中的uib-accordion-group标题和内容都是直接写在视图中的，除此之外，uib-accordion-group还有其他几种使用方式：
1. 配合ng-repeat生成面板
$scope.groups = [
{
title: '第一个面板',
content: '第一个面板的内容'
},
{
title: '第二个面板',
content: '第二个面板的内容'
}
];
<uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">
{{group.content}}
</uib-accordion-group>
效果为：
2. 面板中可以包含动态生成的内容
$scope.items = ['Item 1', 'Item 2', 'Item 3'];
$scope.addItem = function () {
var newItemNo = $scope.items.length + 1;
$scope.items.push('Item ' + newItemNo);
};
<uib-accordion-group heading="动态内容">
<button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
<div ng-repeat="item in items">{{item}}</div>
</uib-accordion-group>
效果为：
点击Add Item按钮后，面板的内容增加了，面板的大小也会变化，适应新的内容。
3. 使用自定义模板
uib-accordion-group默认的模板是uib/template/accordion/accordion-group.html，模板内容包含在ui-bootstrap-tpls-1.3.2.js文件中，可以参考原生的模板内容写一个自定义模板，然后用template-url来引用。
例：
1 <script type="text/ng-template" id="group-template.html"> 2 <div class="panel {{panelClass || 'panel-default'}}"> 3 <div class="panel-heading"> 4 <h4 class="panel-title" style="color:#fa39c3"> 5 <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"> 6 <span ng-class="{'text-muted': isDisabled}">{{heading}}</span> 7 </a> 8 </h4> 9 </div> 10 <div class="panel-collapse collapse" uib-collapse="!isOpen"> 11 <div class="panel-body" style="text-align: right" ng-transclude></div> 12 </div> 13 </div> 14 </script>
1 <uib-accordion-group heading="Custom template" template-url="group-template.html"> 2 Hello 3 </uib-accordion-group>
4. 使用自定义的面板标题
如果面板的标题是简单的文本，使用heading属性就足够了。如果是复杂的内容，比如有图标，那么可以使用uib-accordion-heading
<uib-accordion-group 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>
内容...
</uib-accordion-group>
效果为：
在实际使用中，如果想在点击每个面板标题时就展开控件，而不是点击文字才展开，那么加入这个样式：
.accordion-toggle { display: block; }
如果想在面板标题中加入可点击的元素（按钮，复选框等），并且点击这些元素时不展开控件，那么要在这些元素上阻止事件冒泡：
ng-click="$event.stopPropagation()"
最后，贴上完整的代码：
View Code 
1 复制代码 2 1 <!DOCTYPE html> 3 2 <html ng-app="myApp" xmlns="http://www.w3.org/1999/xhtml"> 4 3 <head> 5 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 5 <link href="/Content/bootstrap.css" rel="stylesheet" /> 7 6 <title></title> 8 7 9 8 <script src="/Scripts/angular.js"></script> 10 9 <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script> 11 10 <script> 12 11 13 12 angular.module('myApp', ['ui.bootstrap']).controller('AccordionDemoCtrl', function ($scope) { 14 13 $scope.oneAtATime = true; 15 14 16 15 $scope.groups = [ 17 16 { 18 17 title: '第一个面板', 19 18 content: '第一个面板的内容' 20 19 }, 21 20 { 22 21 title: '第二个面板', 23 22 content: '第二个面板的内容' 24 23 } 25 24 ]; 26 25 27 26 $scope.items = ['Item 1', 'Item 2', 'Item 3']; 28 27 29 28 $scope.addItem = function () { 30 29 var newItemNo = $scope.items.length + 1; 31 30 $scope.items.push('Item ' + newItemNo); 32 31 }; 33 32 34 33 $scope.status = { 35 34 isFirstOpen: true, 36 35 isFirstDisabled: false 37 36 }; 38 37 }); 39 38 40 39 </script> 41 40 42 41 </head> 43 42 <body style="padding:10px;"> 44 43 <div ng-controller="AccordionDemoCtrl"> 45 44 <script type="text/ng-template" id="group-template.html"> 46 45 <div class="panel {{panelClass || 'panel-default'}}"> 47 46 <div class="panel-heading"> 48 47 <h4 class="panel-title" style="color:#fa39c3"> 49 48 <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"> 50 49 <span ng-class="{'text-muted': isDisabled}">{{heading}}</span> 51 50 </a> 52 51 </h4> 53 52 </div> 54 53 <div class="panel-collapse collapse" uib-collapse="!isOpen"> 55 54 <div class="panel-body" style="text-align: right" ng-transclude></div> 56 55 </div> 57 56 </div> 58 57 </script> 59 58 60 59 <div class="checkbox"> 61 60 <label> 62 61 <input type="checkbox" ng-model="oneAtATime"> 63 62 同一时间只展开一个面板 64 63 </label> 65 64 </div> 66 65 <uib-accordion close-others="oneAtATime"> 67 66 <uib-accordion-group heading="标题" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled"> 68 67 内容... 69 68 </uib-accordion-group> 70 69 <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups"> 71 70 {{group.content}} 72 71 </uib-accordion-group> 73 72 <uib-accordion-group heading="动态内容"> 74 73 <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button> 75 74 <div ng-repeat="item in items">{{item}}</div> 76 75 </uib-accordion-group> 77 76 <uib-accordion-group heading="Custom template" template-url="group-template.html"> 78 77 Hello 79 78 </uib-accordion-group> 80 79 <uib-accordion-group heading="提示面板" panel-class="panel-info"> 81 80 注意面板的颜色 82 81 </uib-accordion-group> 83 82 <uib-accordion-group is-open="status.open"> 84 83 <uib-accordion-heading> 85 84 自定义的面板标题 <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> 86 85 </uib-accordion-heading> 87 86 内容... 88 87 </uib-accordion-group> 89 88 </uib-accordion> 90 89 </div> 91 90 92 91 </body> 93 92 </html>
1 <!DOCTYPE html>
2 <html ng-app="myApp" xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <link href="/Content/bootstrap.css" rel="stylesheet" />
6 <title></title>
7
8 <script src="/Scripts/angular.js"></script>
9 <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>
10 <script>
11
12 angular.module('myApp', ['ui.bootstrap']).controller('AccordionDemoCtrl', function ($scope) {
13 $scope.oneAtATime = true;
14
15 $scope.groups = [
16 {
17 title: '第一个面板',
18 content: '第一个面板的内容'
19 },
20 {
21 title: '第二个面板',
22 content: '第二个面板的内容'
23 }
24 ];
25
26 $scope.items = ['Item 1', 'Item 2', 'Item 3'];
27
28 $scope.addItem = function () {
29 var newItemNo = $scope.items.length + 1;
30 $scope.items.push('Item ' + newItemNo);
31 };
32
33 $scope.status = {
34 isFirstOpen: true,
35 isFirstDisabled: false
36 };
37 });
38
39 </script>
40
41 </head>
42 <body style="padding:10px;">
43 <div ng-controller="AccordionDemoCtrl">
44 <script type="text/ng-template" id="group-template.html">
45 <div class="panel {{panelClass || 'panel-default'}}">
46 <div class="panel-heading">
47 <h4 class="panel-title" style="color:#fa39c3">
48 <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading">
49 <span ng-class="{'text-muted': isDisabled}">{{heading}}</span>
50 </a>
51 </h4>
52 </div>
53 <div class="panel-collapse collapse" uib-collapse="!isOpen">
54 <div class="panel-body" style="text-align: right" ng-transclude></div>
55 </div>
56 </div>
57 </script>
58
59 <div class="checkbox">
60 <label>
61 <input type="checkbox" ng-model="oneAtATime">
62 同一时间只展开一个面板
63 </label>
64 </div>
65 <uib-accordion close-others="oneAtATime">
66 <uib-accordion-group heading="标题" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
67 内容...
68 </uib-accordion-group>
69 <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">
70 {{group.content}}
71 </uib-accordion-group>
72 <uib-accordion-group heading="动态内容">
73 <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
74 <div ng-repeat="item in items">{{item}}</div>
75 </uib-accordion-group>
76 <uib-accordion-group heading="Custom template" template-url="group-template.html">
77 Hello
78 </uib-accordion-group>
79 <uib-accordion-group heading="提示面板" panel-class="panel-info">
80 注意面板的颜色
81 </uib-accordion-group>
82 <uib-accordion-group is-open="status.open">
83 <uib-accordion-heading>
84 自定义的面板标题 <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
85 </uib-accordion-heading>
86 内容...
87 </uib-accordion-group>
88 </uib-accordion>
89 </div>
90
91 </body>
92 </html>
