開閉可能なパネルを生成する - Collapse
ヘッダー（タイトル）領域をクリックすることで、本文を開閉できるパネルを生成します。
では、具体的な例を見ていきましょう。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="scripts/collapse.js"></script>
</head>
<body ng-controller="MyController">
<!--（1）パネルを定義-->
<div class="panel panel-primary">
<!--（3）ヘッダー領域をクリックすると、変数isShowを反転-->
<div class="panel-heading" ng-click="isShow = !isShow">
<div class="panel-title">タブパネルとは</div>
</div>
<!--（2）変数isShowによって本文を開閉-->
<div class="panel-body" uib-collapse="isShow">
パネルの端に配置されているタブをクリックすると、パネルの中の内容が切り替わるUIです。<br />タブにマウスポインターを当てるだけで切り替わる場合もあります。
</div>
</div>
</body>
</html>
angular.module('myApp', [ 'ui.bootstrap'])
.controller('MyController', ['$scope', function($scope) {
}
}]);
パネルそのものは、Bootstrapのお作法に従って、以下のようにマークアップします（1）。詳しくは、別稿「Bootstrapでリスト／パネル／タブ使って情報をすっきり整理しよう」も参照してください。panel-primaryの部分は、用途に応じてpanel-success（成功）、panel-info（情報）、panel-warning（警告）のような値も指定できます。
<div class="panel panel-primary">
<div class="panel-heading">
<div class="panel-title">ヘッダータイトル</div>
</div>
<div class="panel-body">
パネル本文
</div>
</div>
あとは、パネルの本文部分にuib-collapse属性を指定します（2）。この例であれば、変数isShowのtrue／falseに応じて、本文の表示／非表示を切り替えます。変数isShowは、ヘッダー領域のクリックによって反転するようにしています（3）。
アコーディオンパネルを生成する - UI Bootstrap（Accordion）
Accordionウィジェットは、開閉式のパネル群を生成します。と言ってしまうと、Collapseウィジェットにも似ていますが、複数のパネルをまとめて管理し、あるパネルを開くと、現在開いているパネルを自動的に閉じてくれます。蛇腹に開閉するその様子が、アコーディオンに似ていることから、このように呼ばれます。
では、具体的な例を見てみましょう。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="scripts/accordion.js"></script>
</head>
<body ng-controller="MyController">
<!--（2）アコーディオンパネルを定義-->
<uib-accordion close-others="true">
<!--（1）個々のパネルを設定-->
<uib-accordion-group ng-repeat="panel in panels" heading="{{panel.header}}"
is-open="panel.open" is-disabled="panel.disabled">
<div ng-bind-html="panel.content"></div>
</uib-accordion-group>
</uib-accordion>
</body>
</html>
angular.module('myApp', [ 'ui.bootstrap', 'ngSanitize' ])
.controller('MyController', ['$scope', function($scope) {
// パネルに表示する情報
$scope.panels = [
{
header: 'タブパネル',
content: 'パネルの端に配置されているタブを...
},
...中略...
];
}]);
個々のパネルを表すのは、<uib-accordion-group>要素です（1）。以下のような属性を指定できます。
| 属性名 | 概要 | デフォルト値 |
|---|---|---|
| heading | ヘッダータイトル | － |
| is-open | デフォルトで開いた状態にするか | false |
| is-disabled | パネルを無効化するか | false |
本体にはパネル本文を記述します。本文にはタグ文字列が含まれる可能性があるため、ng-bind-html属性で埋め込む点に注意してください。
サンプルでは、ng-repeat属性であらかじめ用意したオブジェクト配列panelsの内容を展開していますが、もちろん、<uib-accordion-group>要素をパネルの数だけ列挙しても構いません。
個々のパネルを準備できたら、あとは全体を<uib-accordion>要素で括ることで、アコーディオンパネルの完成です（2）。close-others属性をtrue（デフォルト）にしておくことで、常にひとつだけパネルを開くようにします。もしも同時に複数のパネルを開いた状態にしたい場合には、この属性をfalseとしてください。
まとめ
以上、本稿ではUI Bootstrapを利用してダイアログボックスやアコーディオンパネル、タブパネルを生成する方法について解説しました。コンテンツが増えてくると、自ずと縦長のページが増えていきますが、コンテンツの種類に応じて、こうしたUIを活用することで、スクロールを減らし、限られた領域の中でスマートに情報を見せることが可能になります。次回は、データをチャート化するウィジェットをはじめ、階層型のデータを見せるツリーメニュー、時系列のデータを見せるタイムラインなどのUIを紹介します。
参考資料
- 『AngularJSアプリケーションプログラミング』（技術評論社）
- 『AngularJSライブラリ 活用レシピ 厳選 108』（WINGSプロジェクト）
