angular-treeRepeat

Recursive repeater for AngularJS
4 people use it
Author: B7f1da7c20c20b6aeb1eea0b9dc13f25?d=https%3a%2f%2fidenticons.github.com%2fdd37039d3fb4dfdb4aff295d10abf0ef tchatel
Submitted by: Fae898a2af710caca8100b77f9669c31?d=https%3a%2f%2fidenticons.github.com%2fcb2318bf8accbf98729751cc8d9f8742 micouz

Recursive repeater for AngularJS

or how to build a tree by hand

Demo is here : http://tchatel.github.io/angular-treeRepeat/

This treeRepeat directive is derived from ngRepeat, to perform a recursive repeat of an HTML element on a hierarchical data structure.

The idea is not to have a monolithic full tree component, but a low level recursive repeater which allow to build a tree with any template, and any data structure type. Of course any sort of tree built with those low level directives may be packaged itself in a ready to use directive.

There are 5 directives :

  • tree, that only publishes a controller ; it must be set on an element containing those with the other directives
  • treeRepeat, with exact same syntax as ngRepeat
  • treeInsertChildren, with an AngularJS expression that evaluates to the collection of children nodes, used for next level of repeat
    • the same HTML element with treeRepeat directive is repeated against the children nodes
    • all the repeated elements are inserted into that element with treeInsertChildren directive
  • treeDraggable, to mark an element as draggable
    • it takes an expression, evaluated on the dragged node, the value of which will be referenced as $drag in tree-droppable expression
  • tree-droppable, to mark a drag and drop target
    • it takes an expression which will be evaluated as an action, and where $drag references the value of treeDraggable expression

Sample template, with an action when a node is clicked :

Sample template, with drag and drop support :

comments powered by Disqus
This page was last updated about 3 years ago.