如何设置angular树默认为打开

如何设置angular树默认为打开

树控件可以作为一个DOM元素或属性。

复制脚本和CSS为你的项目添加一个脚本和链接到你的页面。




添加一个依赖于您的应用程序模块

angular.module('myApp', ['treeControl']);

将树元素添加到您的模板


tree-model="dataForTheTree"
options="treeOptions"
on-selection="showSelected(node)"
selected-node="node1">
employee: {{node.name}} age {{node.age}}


tree-model="dataForTheTree"
options="treeOptions"
on-selection="showSelected(node)"
selected-node="node1">
employee: {{node.name}} age {{node.age}}


并为树添加数据

$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结构

... label - expanded angular template is in the treecontrol element ...

... label - expanded angular template is in the treecontrol element ...

... label - expanded angular template is in the treecontrol element ...








CSS类用于内置样式的树控件。附加的类可以使用options.injectclasses成员加入（见上文）
树扩展，树倒塌，树叶放在“UL”元素
树枝头，树的叶头-被放置在'i'元素。我们使用这些类来放置树的图标
树选择放置于标签div