Editable JSON-tree AngularJS directive

Operations with nodes: add, reset, remove, change value and type, drag and sort

View on Github

High edit level (default)

Drag and sort tree nodes via pressed 'Ctrl' key



{{jsonData | json}}


--- is an input field, where you can input any JSON data. The directive automatically determine the type and reconstruct tree view.
Examples of typing:
[1,2,3] --- convert to Array,
{"json": "tree"} --- convert to Object,
true --- convert to Boolean,
20.14 --- convert to Number,
Hello World! --- convert to String,
function(){} --- convert to Function

« + » --- add element(s) to the collection. For example, if you add [4,"5",6] to [1,2,3] -> the result is [1,2,3,4,"5",6]. If you add [[4,"5",6]] to [1,2,3] -> the result is [1,2,3,[4,"5",6]].
« ~ » --- reset node value to null.
« - » --- completely remove the node.
«Ctrl» --- press Ctrl key to drag and sort tree nodes.

Low edit level (add attributes: edit-level="low", collapsed-level="3")



{{jsonData | json}}