Angular Tree

EXAMPLE:

label: {{node.label}} ({{node.id}})

Classic style of the tree control, set using the class tree-classic.

Click on the folder icons to open and close the tree nodes. Click on the node label to select a node in the tree. A Second click on the node label will unselect the node.

The tree data is set using the tree-model attribute, which accepts either a node object or an array of node objects. A Node object is a regular javascript object which has a children array property (children is the default name, it can be overridden using the tree options).

Selected node: {{selectedNode?selectedNode.label:"N/A"}}

EXAMPLE:

label: {{node.label}} ({{node.id}})

Using the tree control as an attribute is as easy as using a div and adding a treecontrol attribute to it

Note that you have to include the tree-control-attribute.css file instead of the tree-control.css as the CSS selectors are quite different between the two styles of usage.

Selected node: {{selectedNode?selectedNode.label:"N/A"}}

EXAMPLE:

{{node.label}} - index: {{$index}}

Taking control of the tree labels is as simple as with ng-repeat - you include a template in the tree control tag.

Special properties are exposed to the local scope of each template, including the current node as node.

Selected node: {{selectedNode?selectedNode.label:"N/A"}}

Variable	Type	Details
`node`	Object	The current node the label represents.
`$parentNode`	Object	The parent of the current node.
`$index`	number	iterator offset of the repeated element under one parent node(0..length-1).
`$first`	boolean	true if the repeated element is first in the iterator.
`$middle`	boolean	true if the repeated element is between the first and last in the iterator.
`$last`	boolean	true if the repeated element is last in the iterator.
`$odd`	boolean	true if the iterator position $index is even (otherwise false).
`$even`	boolean	true if the iterator position $index is odd (otherwise false).

EXAMPLE:

label: {{node.label}} ({{node.id}} ) {{$index}}

The scope used to compile the tree labels is a child scope of the controller (used to compile the tree-control directive). As such, in the tree label scope you have access to all the properties and methods defined in the controller scope. This example shows how to access a method in the parent scope from the label template.

Selected node: {{selectedNode?selectedNode.label:"N/A"}}

Last clicked: {{lastClicked ? lastClicked.label : "N/A"}}

EXAMPLE:

label: {{node.label}} ({{node.id}})

You can modify the tree-model bound tree, and the tree will update with the new structure

For instance, adding nodes:

Add a new root
Add a child to the 2nd node

EXAMPLE:

label: {{node.label}} ({{node.id}})

The selected-node attribute of treecontrol is bound to the currently selected node object of the tree. Like any other Angular bound value, updating selected-node will set the tree selection, and clicking the tree (selecting a node) will update back the selected-node.

Setting selected-node can also be used to set the default selected node of the tree.

Note that if using multiple selection, the selected nodes are bound to an Array property selected-nodes instead of selected-node.

select node 1
select node 2
select node 3
select node 4
clear Selected

Selected node: {{selected.label}}

EXAMPLE:

label: {{node.label}} ({{node.id}})

The expanded-nodes attribute of treecontrol is bound to the currently selected node object of the tree. Like any other Angular bound value, updating expanded-nodes will set the expanded nodes in the tree, and expanding or contracting nodes in the tree will update the expanded-nodes property.

Setting expanded-nodes can also be used to set the default expanded nodes of the tree.

Expand 2, 3 and 3.3 (only)

The currently expanded nodes:

{{node.label}}

EXAMPLE:

label: {{node.label}} ({{node.id}})

The tree supports events for selection and expansion of nodes. The events are set using the on-selection and on-node-toggle attributes which values are evaluated as angular expressions (like ng-click value). The expression can use the node and selected variables (for on-selection) or the node and expanded variables (for on-node-toggle) for context of the clicked node and if it was selected / deselected or expanded / collapsed.

Note the events are fired only on the clicked node. If using the tree in single selection mode and one node is selected, when selecting a different node only one on-selection event will be fired for the newly selected node. The old selected node will not be selected anymore without an on-selected event.

In order to prevent selection of branches (folders) in the tree, set the options.dirSelectable to false. Clicking folder labels at this point will expand and contract the node.

Events fired:

Variable	Type	Details
`node`	Object	The current node the label represents.
`$parentNode`	Object	The parent of the current node.
`$index`	number	iterator offset of the repeated element under one parent node(0..length-1).
`$first`	boolean	true if the repeated element is first in the iterator.
`$middle`	boolean	true if the repeated element is between the first and last in the iterator.
`$last`	boolean	true if the repeated element is last in the iterator.
`$odd`	boolean	true if the iterator position $index is even (otherwise false).
`$even`	boolean	true if the iterator position $index is odd (otherwise false).
`selected`	boolean	true if the node is selected, false if it is de-selected. Only applies to the on-selection event.
`expanded`	boolean	true if the node is expanding, false if the node is contracting. Only applies to the on-node-toggle event.

EXAMPLE:

label: {{node.label}} ({{node.id}})

The tree control supports multi-selection using the options.multiSelect option and the selected-nodes attribute (instead of the selected-node attribute in single selection mode). selected-nodes is expected to be an Array which will contain the selected nodes. When using multi-selection, selecting a node adds it to the selected-nodes array and a second click remove it from the array.

Selected Nodes:

{{node.label}}

Selection Events:

EXAMPLE:

label: {{node.label}} ({{node.id}})

In order to prevent selection of branches (folders) in the tree, set the options.dirSelectable to false. Clicking folder labels at this point will expand and contract the node.

Selected node: {{selectedNode?selectedNode.label:"N/A"}}

EXAMPLE:

label: {{node.label}} ({{node.id}})

To restrict which nodes are selectable on the tree, define the options.isSelectable(node) function.

Example disables the selection of any node on or under the Node 1 node

Selected node: {{selectedNode?selectedNode.label:"N/A"}}

EXAMPLE:

label: {{node.label}} ({{node.id}})

Light style of the tree control, set using the class tree-light.

Click on the folder icons to open and close the tree nodes. Click on the node label to select a node in the tree.

Selected node: {{selectedNode?selectedNode.label:"N/A"}}

EXAMPLE:

label: {{node.label}} ({{node.id}})

Dark style of the tree control, set using the class tree-dark. The style does not include the background color, instead, inject your own background color using a wrapper div element.

Click on the folder icons to open and close the tree nodes. Click on the node label to select a node in the tree.

Selected node: {{selectedNode?selectedNode.label:"N/A"}}

EXAMPLE:

label: {{node.label}}

When using the tree control to display file like structures it is required to display the file type on each of the nodes. To achive that we have to use a second icon using the Tree Label Templates with a ng-switch or equivalent directive, as shown in this example.

The tree control does not support replacing the expand / contract icons with a file type icon - it is design decision we made as we designed the tree control.

EXAMPLE:

label: {{node.label}} ({{node.id}})

The options.injectClasses option allows to add custom CSS classes on the tree DOM. The selected classes are

ul - inject classes into the ul elements (branch elements)
li - inject classes into the li elements (both branch and leaf elements)
liSelected - inject classes into the li elements of the selected node
iExpanded - inject classes into the 'i' element for the expanded nodes (the icon)
iCollapsed - inject classes into the 'i' element for the collapsed nodes
iLeaf - inject classes into the 'i' element for leaf nodes
label - inject classes into the div element around the label
labelSelected - inject classes into the div element around the label only when the node is selected

EXAMPLE:

label: {{node.label}} ({{node.id}})

Angular tree control assumes that the tree nodes have a children array property for the children of the node. You can override the children property name using the tree nodeChildren property of the tree options.

EXAMPLE:

label: {{node.label}} ({{node.id}})

the isLeaf option allows taking control of the selection if a node is a branch (folder) or a leaf (File). This method returns a boolean, where true indicates a leaf, false indicates a branch.

EXAMPLE:

label: {{node.label}} {{node.name}} ({{node.id}})

The order-by and reverse-order properties allows controlling the sorting of the tree nodes. The value of those attributes is used with the ng-repeat orderBy filter - see more details at the Angular JS orderBy docs.

The sorting is done for each branch individually (sorting does not change the stucture of the tree itself).

Reverse Order

EXAMPLE:

label: {{node.label}} ({{node.id}})

The filter-expression and filter-comparator properties allows filtering the nodes of the tree. The value of those attributes is used with the ng-repeat Filter filter - see more details at the Angular JS Filter docs.

The filter is done for each branch individually.

The filter expression (predicate) is used for selecting nodes from the tree to display. It can be a string, object or a function. If a string, it is used to match values of the node properties. If an object, each property of the expression object is used to match values of the node properties with the same name. A function can be used to write arbitrary filters, and will be invoked for each node of the tree.

The filter comparator is used in determining if the expected value (from the filter expression) and actual value (from the object in the array) should be considered a match. If false, it looks for substring match in a case insensitive way (the default). If true, it looks for exact match. If a function, the function will be given the object value and the predicate value to compare and should return true if the item should be included in filtered result.

Filter expression (string)
Filter comparator (true or false)

EXAMPLE:

label: {{node.name}} ({{node.age}})

The angular tree control is using an equality function to determine if two nodes are equal, The build it function checks for equality of the node members, ignoring the children property.

In some cases, it is required to replace the equality function. Some examples include

If multiple nodes exist in the three that are identical except for their parents and children, the default function will confuse between them. In such as case, it is recommended to replace the function with the === operator (as in this example).
If you have an id property for nodes that can be relayed on for node uniqueness and identification, using a custom equality function that checks for that id will result in better performance.

EXAMPLE:

label: {{node.label}} ({{node.id}})

By default the angular tree control uses internal template to define control structure.

However, user is able to specify his own template via:

options.templateUrl for individual tree control.
treeConfig.templateUrl for all tree controls during application config or run step. ( treeConfig is global injectable value provider)

If user defined template could not be found, default template will be used.

Example above, applies italic bold style for element label, and uses ng-show instead of ng-if (as defined in default template)

Angular Tree

The AngularJS tree component

Basic Usage (Classic style, default configuration)

As an Attribute (Alternative to a Custom Element)

Tree Label Templates (Customize the tree labels)

Tree Label Scope (as a child of the controller scope)

Changing the live tree (adding and removing nodes)

Selected Node Binding (selected-node)

Expanded Nodes Binding (expanded-nodes)

Events (on-expand & on-selection)

Multi Selection (options.multiSelect & selected-nodes)

Clicking Labels Expand & Collapse (options.dirSelectable)

Disabling Selection of Nodes (options.isSelectable)

Light Style (Basic style, default configuration)

Dark Style (Basic style, default configuration)

File Style using Tree Label Templates (Basic style, default configuration)

Custom Css Classes (options.injectClasses)

Custom Children (options.nodeChildren)

Custom Branch / Leaf (options.isLeaf)

Sorting tree nodes (order-by, reserve-order)

Filtering tree nodes (filter-expression, filter-comparator)

Custom Equality (options.equality)

External Template (options.templateUrl, treeConfig.templateUrl)