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()"
最后，貼上完整的代碼：
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>
目錄：
AngularJs的UI組件ui-Bootstrap分享（一）
AngularJs的UI組件ui-Bootstrap分享（二）——Collapse
AngularJs的UI組件ui-Bootstrap分享（三）——Accordion
AngularJs的UI組件ui-Bootstrap分享（四）——Datepicker Popup
AngularJs的UI組件ui-Bootstrap分享（五）——Pager和Pagination
AngularJs的UI組件ui-Bootstrap分享（六）——Tabs
AngularJs的UI組件ui-Bootstrap分享（七）——Buttons和Dropdown
AngularJs的UI組件ui-Bootstrap分享（八）——Tooltip和Popover
AngularJs的UI組件ui-Bootstrap分享（九）——Alert
AngularJs的UI組件ui-Bootstrap分享（十）——Model
AngularJs的UI組件ui-Bootstrap分享（十一）——Typeahead
AngularJs的UI組件ui-Bootstrap分享（十二）——Rating
AngularJs的UI組件ui-Bootstrap分享（十三）——Progressbar
AngularJs的UI組件ui-Bootstrap分享（十四）——Carousel