Recursive repeater for AngularJS
4 people use it
Author: B7f1da7c20c20b6aeb1eea0b9dc13f25? tchatel
Submitted by: Fae898a2af710caca8100b77f9669c31? micouz

Recursive repeater for AngularJS

or how to build a tree by hand

Demo is here :

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 over 4 years ago.