ツリーメニューを生成する - Angular Tree Control
Angular Tree Controlを利用することで、エクスプローラーによく似たツリー形式のメニューを生成できます。サイトメニューのような階層構造を持った情報を表現するのに適したウィジェットです。
Angular Tree Controlは、Bowerを利用することで、以下のコマンドでインストールできます。
bower install --save angular-tree-control
では、具体的な例を見ていきます。以下は、カテゴリー別の記事をツリー表示した例です。
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS</title>
<!-- （1）ライブラリ／スタイルシートをインポート-->
<link rel="stylesheet" href="bower_components/angular-tree-control/css/tree-control.css" />
<link rel="stylesheet" href="bower_components/angular-tree-control/css/tree-control-attribute.css" />
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-tree-control/angular-tree-control.js"></script>
<script src="scripts/tree.js"></script>
</head>
<body ng-controller="MyController">
<treecontrol class="tree-classic"
tree-model="data"
order-by="published"
options="opts"
selected-nodes="selectedNode">
<a ng-href="{{node.url}}">{{node.title}}
<span ng-show="node.published">({{node.published | date: 'yyyy/MM/dd'}}～)</span>
</a>
</treecontrol>
<div>選択した連載記事：{{selectedNode}}</div>
</body>
</html>
// （2）treeControlモジュールへの依存関係を設定
angular.module('myApp', [ 'treeControl' ])
.controller('MyController', ['$scope', function($scope) {
$scope.opts = {
multiSelection: true,
nodeChildren: "children",
dirSelectable: true,
};
$scope.data = [
{
title: 'CSS',
children: [
{
title: 'CSSで作るWeb用パーツ',
url: 'http://codezine.jp/article/corner/510',
published: new Date(2014, 03, 03),
children: []
},
{
...中略...
}
]
},
{
title: 'JavScript',
children: [
{
title: 'AngularJS',
children: [
{
title: 'AngularJSではじめるJavaScriptフレームワーク開発スタイル',
url: 'http://codezine.jp/article/corner/544',
published: new Date(2014, 09, 10),
children: []
},
...中略...
]
},
...中略...
];
}]);
Angular Tree Controlを利用するには、ライブラリ（angular-tree-control.js）／スタイルシート（tree-control.css／tree-control-attribute.css）をインポートした上で（1）、アプリモジュール（myApp）からtreeControlモジュールへの依存関係を宣言します（2）。
あとは、<treecontrol>要素（ディレクティブ）でツリーメニューを生成できるようになります。利用できる主な属性は、以下の通りです。
| 属性 | 概要 |
|---|---|
| tree-model | ツリーを構成するオブジェクト |
| selected-node | 選択されたノードを格納する変数 |
| selected-nodes | 選択されたノード群を格納する変数 |
| on-selection | ノード選択時に実行される関数（引数は選択ノード） |
| on-node-toggle | ノード開閉時に実行される関数（引数は選択ノード） |
| options |
動作オプション（以下は主なオプションとその説明）
|
| order-by | ノードをソートする時のキープロパティ |
また、<treecontrol>要素の本体では、個々のノードを表示するためのテンプレートを表します。この例では、記事タイトルから個別の記事にジャンプするようにしています。
tree-model属性に指定するオブジェクトツリーには、自由にプロパティを指定できますが、一点、子ノードを表すchildrenは予約キーなので注意してください（ただし、options属性のnodeChildrenキーで変更することも可能です）。
ノードを選択した時の処理はon-selection属性で指定できます。ただし、シンプルに選択されたノードを取得したいならば、select-node／select-nodes属性を指定しても良いでしょう。後者（複数形）を利用するには、optionsパラメーターでmultiSelectionオプションをtrueに設定してください。
