Name: angular-tree-control
Owner: Two Sigma
Description: Angular JS Tree
Created: 2016-02-17 16:05:16.0
Updated: 2016-02-17 16:05:17.0
Pushed: 2016-03-05 12:16:41.0
Homepage: http://wix.github.io/angular-tree-control
Size: 1135
Language: HTML
GitHub Committers
User | Most Recent Commit | # Commits |
---|
Other Committers
User | Most Recent Commit | # Commits |
---|
Pure AngularJS based tree control component.
To get started, check out wix.github.io/angular-tree-control
We have tried a number of tree controls built for angular and experience a of issues with each. As a result we decided to build a new tree control with the following design guidelines
Bower: bower install angular-tree-control
The tree control can be used as a Dom element or as an attribute.
Copy the script and css into your project and add a script and link tag to your page.
ipt type="text/javascript" src="/angular-tree-control.js"></script>
link for CSS when using the tree as a Dom element -->
k rel="stylesheet" type="text/css" href="css/tree-control.css">
link for CSS when using the tree as an attribute -->
k rel="stylesheet" type="text/css" href="css/tree-control-attribute.css">
Add a dependency to your application module.
lar.module('myApp', ['treeControl']);
Add tree elements to your Angular template
as a Dom element -->
econtrol class="tree-classic"
ree-model="dataForTheTree"
ptions="treeOptions"
n-selection="showSelected(node)"
elected-node="node1">
mployee: {{node.name}} age {{node.age}}
eecontrol>
as an attribute -->
treecontrol class="tree-classic"
ree-model="dataForTheTree"
ptions="treeOptions"
n-selection="showSelected(node)"
elected-node="node1">
mployee: {{node.name}} age {{node.age}}
v>
and add the data for the tree
pe.treeOptions = {
nodeChildren: "children",
onLabelClick: "both",
injectClasses: {
ul: "a1",
li: "a2",
liSelected: "a7",
iExpanded: "a3",
iCollapsed: "a4",
iLeaf: "a5",
label: "a6",
labelSelected: "a8"
}
pe.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" : [] }
Attributes of angular treecontrol
treecontrol
: the treeview element.tree-model
: [Node|Array[Node]] the tree data on the $scope
. This can be an array of nodes or a single node.selected-node
: [Node] binding for the selected node in the tree. Updating this value updates the selection displayed in the tree. Selecting a node in the tree will update this value.expanded-nodes
: [Array[Node]] binding for the expanded nodes in the tree. Updating this value updates the nodes that are expanded in the tree.on-selection
: callback called whenever selecting a node in the tree. The callback argument is the selected node.on-node-toggle
: callback called whenever a node expands or collapses in the tree. The function arguments are the toggled node and a boolean which is true for expansion, false for collapse.options
: different options to customize the tree control.nodeChildren
: the name of the property of each node that holds the node children. Defaults to 'children'.onLabelClick
: decide what to do when label is clicked. Options are select
, expand
, or both
. Defaults to select
.equality
: the function used to determine equality between old nodes and new ones when checking whether a replacement node should be expanded and/or marked as selected. Defaults to a function which uses angular.equals()
on everything except the property indicated in nodeChildren
.isLeaf
: function (node) -> boolean used to determine if a node is a leaf or branch. The default function checks for existence of children of the node to determine leaf or branch.injectClasses
: allows to inject additional CSS classes into the tree DOMul
: inject classes into the ul elementsli
: inject classes into the li elementsliSelected
: inject classes into the li elements only when the node is selectediExpanded
: inject classes into the 'i' element for the expanded nodesiCollapsed
: inject classes into the 'i' element for the collapsed nodesiLeaf
: inject classes into the 'i' element for leaf nodeslabel
: inhject classes into the div element around the labellabelSelected
: inject classes into the div element around the label only when the node is selectedorder-by
: value for ng-repeat to use for ordering sibling nodesreverse-order
: whether or not to reverse the ordering of sibling nodes based on the value of order-by
The Angular Tree control uses a similar paradigm to ng-repeat in that it allows using the current node as well as values from
the parent scope. The current node is injected into the scope used to render the label as the `node
` member (unlike ng-repeat, we
do not allow to name the current node item in the transcluded scope).
In order to render a template that takes a value `X
from the parent scope of the tree and value ``
Y``` from the current node, use the following template
tyling
angular-tree-control renders to the following DOM structure
following CSS classes are used in the built-in styles for the tree-control.
tional classes can be added using the options.injectClasses member (see above)
ee-expanded, tree-collapsed, tree-leaf - are placed on the 'ul' element
ee-branch-head, tree-leaf-head - are placed on the 'i' elements. We use those classes to place the icons for the tree
ee-selected - placed on the div around the label
eference
tree control is based in part on the angular.treeview component
gular.treeview: http://ngmodules.org/modules/angular.treeview
icense
MIT License.
[LICENSE](https://github.com/wix/angular-tree-control/blob/master/LICENSE)