ng-jsoneditor

Angular version of the insanely cool jsoneditor

Requirements

AngularJS
Jsoneditor

Usage

Bower option:

bower install angular-tools/ng-jsoneditor

or NPM option:

npm install ng-jsoneditor

This will copy the ng-jsoneditor.js files into a bower_components folder, along with its dependencies. Load the script files in your application:

<script src="/static/bower_components/angularjs/angular.min.js"></script>
<script src="/static/bower_components/jsoneditor/dist/jsoneditor.min.js"></script>
<script src="/static/bower_components/ng-jsoneditor/ng-jsoneditor.js"></script>

Add the 'ng.jsoneditor' module as a dependency to your application module:

var myAppModule = angular.module('MyApp', ['ng.jsoneditor']);

Finally, add the directive to your html:

<div ng-jsoneditor ng-model="obj.data" options="obj.options" style="width: 400px; height: 300px;"></div>

Demo

Try this fiddle

http://jsfiddle.net/angulartools/sd3at5ek/

Sample code

myAppModule.controller('MyController', [ '$scope', function($scope) {
  $scope.obj = {data: json, options: { mode: 'tree' }};
  
  $scope.btnClick = function() {
    $scope.obj.options.mode = 'code'; //should switch you to code view
  }
});

Working with ng-model

Any changes to Jsoneditor or ng-model are reflected instantly.

Instead of editor.get() now you can simply access your ng-model, or $scope.obj.data in this case, to get or set values.

If you would to get and set your JSON data as text (instead of JSON Objects), then you can set prefix-text="true" like this:

<div ng-jsoneditor ng-model="obj.text" prefer-text="true"></div>

Additional options

There are some additional options specific to ng-jsoneditor only.

expanded: can be set to either true or false to have Jsoneditor fully expanded or collapsed by default.

timeout: the timeout interval after which the ng-model is updated to reflect changes in Jsoneditor (as described here). Default is 100ms.

Jsoneditor direct access

For more interaction with the Jsoneditor instance in the directive, we provide a direct access to it. Using

<div ng-jsoneditor="editorLoaded" ></div>

the $scope.editorLoaded function will be called with the Jsoneditor instance as first argument

myAppModule.controller('MyController', [ '$scope', function($scope) {

  $scope.editorLoaded = function(jsonEditor){
        jsonEditor.expandAll()
  };

}]);

Contributors

Sanchit Bhatnagar
Manuel B.
Alan blount
xshen2026

Licence

The Artistic License 2.0: see LICENSE.md

sarfarazansari/ng-jsoneditor