
树控件可以作为一个DOM元素或属性。
复制脚本和CSS为你的项目添加一个脚本和链接到你的页面。
<script type="text/javascript" src="/angular-tree-control.js"></script>
<link rel="stylesheet" type="text/css" href="css/tree-control.css">
<link rel="stylesheet" type="text/css" href="css/tree-control-attribute.css">
添加一个依赖于您的应用程序模块
angular.module('myApp', ['treeControl']);
将树元素添加到您的模板
<!-- as a Dom element -->
<treecontrol class="tree-classic"
tree-model="dataForTheTree"
options="treeOptions"
on-selection="showSelected(node)"
selected-node="node1">
employee: {{node.name}} age {{node.age}}
</treecontrol>
<!-- as an attribute -->
<div treecontrol class="tree-classic"
tree-model="dataForTheTree"
options="treeOptions"
on-selection="showSelected(node)"
selected-node="node1">
employee: {{node.name}} age {{node.age}}
</div>
并为树添加数据
$scope.treeOptions = {
nodeChildren: "children",
dirSelectable: true,
injectClasses: {
ul: "a1",
li: "a2",
liSelected: "a7",
iExpanded: "a3",
iCollapsed: "a4",
iLeaf: "a5",
label: "a6",
labelSelected: "a8"
}
}
$scope.dataForTheTree =
[
{ "name" : "Joe", "age" : "21", "children" : [
{ "name" : "Smith", "age" : "42", "children" : [] },
{ "name" : "Gary", "age" : "21", "children" : [
{ "name" : "Jenifer", "age" : "23", "children" : [
{ "name" : "Dani", "age" : "32", "children" : [] },
{ "name" : "Max", "age" : "34", "children" : [] }
]}
]}
]},
{ "name" : "Albert", "age" : "33", "children" : [] },
{ "name" : "Ron", "age" : "29", "children" : [] }
];
样式
树控件呈现以下的DOM结构
<treecontrol class="tree-classic">
<ul>
<li class="tree-expanded">
<i class="tree-branch-head"></i>
<i class="tree-leaf-head"></i>
<div class="tree-label">
... label - expanded angular template is in the treecontrol element ...
</div>
<treeitem>
<ul>
<li class="tree-leaf">
<i class="tree-branch-head"></i>
<i class="tree-leaf-head"></i>
<div class="tree-label tree-selected">
... label - expanded angular template is in the treecontrol element ...
</div>
</li>
<li class="tree-leaf">
<i class="tree-branch-head"></i>
<i class="tree-leaf-head"></i>
<div class="tree-label">
... label - expanded angular template is in the treecontrol element ...
</div>
</li>
</ul>
</treeitem>
</li>
</ul>
</treecontrol>
CSS类用于内置样式的树控件。附加的类可以使用options.injectclasses成员加入(见上文)
树扩展,树倒塌,树叶放在“UL”元素
树枝头,树的叶头-被放置在'i'元素。我们使用这些类来放置树的图标
树选择放置于标签div