I am using angular tree-view. I am referring below url.
http://ngmodules.org/modules/angular.treeview
It is displaying as expanded. but i want to display as collapsed. when the node is clicked then only it should expand.
Please refer.
Add a comment
|
3 Answers
You have to add collapsed:true in each node like following example
$scope.roleList = [
{ label : "User", id : "role1", children : [
{ label : "subUser1", id : "role11", children : [] },
{ label : "subUser2", id : "role12", children : [
{ label : "subUser2-1", id : "role121", children : [
{ label : "subUser2-1-1", id : "role1211", children : [] },
{ label : "subUser2-1-2", id : "role1212", children : [] }
],collapsed:true}
],collapsed:true}
], collapsed:true},
{ label : "Admin", id : "role2", children : [] },
{ label : "Guest", id : "role3", children : [] }
];
Comments
use collapsed="true"
<div ui-tree="options">
<ol ui-tree-nodes="" ng-model="data" id="tree-root">
<li ng-repeat="item in data" ui-tree-node ng-include="'nodes_renderer.html'" data-collapsed="true"></li>
</ol>
</div>
Comments
You'll need to use the data-collapsed attribute on a tree node:
<li ui-tree-node ng-repeat="item in notes" data-collapsed="{{ item.IsCollapsed }}">
The part that got me was that you'll want to apply an action (ng-class, ng-if, etc) of some kind to the child tree according to the collapse state of the current node:
<ol ui-tree-nodes="" ng-model="item.ChildList" ng-if="!collapsed">
Hope that helps!
