Editable JSON tree


An AngularJS directive used for displaying and editing JSON data in a tree view. It works independently of jQuery (only internal angular's jqLite).
Available operations with nodes:

* add new nodes,
* reset node values to null,
* remove node completely,
* change node value,
* convert type of the node (to object, array, string, number, boolean, null, function) implicitly,
* drag and sort tree nodes (via pressed Ctrl).

How to use

$3

##### bower

$ bower install json-tree

An AngularJS would be installed as a dependency automatically. If it won't, install it manually:

$ bower install angular

Add dependencies to the section of your main html:
``html



`

If you don't use bower, you can manually download and unpack json-tree (zip, tar.gz).

##### npm

$ npm install json-tree2

$3

Inject json-tree directive into angular module and push some data to the controller:
`javascript
angular.module('myApp', ['json-tree'])
.controller('myCtrl', function('$scope'){
$scope.jsonData = { / JSON data / };
})
`

and in html again you can use it like:
`html


If you want to operate only with key-values of the nodes and to avoid transformation of json tree, you can add low edit-level attribute like:
`html

`

You can also customize initial depth of tree view by adding collapsed-level attribute like, that takes a numeric value:
`html

`
If collapsed-level <= 0, then json-tree is fully collapsed. If collapsed-level == 1, then the first level node would be uncollapsed.
If == 2 - the first and second level nodes. And so on.

You can completely refresh directive by using directive internal refresh function. To access this function just add node attribute like:
`html

`
and then use it in controller as:
`javascript
$scope.nodeOptions.refresh();
`

Drag and sort your tree nodes via pressed Ctrl key.

Add more style to prettify the view. See complete example in example.html file.

$3

The default template can be overridden by new custom template as follows:
`js
angular.module('myApp', ['json-tree'])

.controller('myCtrl', ['$scope', 'jsonTreeConfig', function($scope, jsonTreeConfig){
jsonTreeConfig.templateUrl = 'custom-template.html';
}]);
``

---
For more details of technically usage, please, watch example online and test it.
There is given a short instruction.