bearmini-ng-jsoneditor

Angular version of the insanely cool jsoneditor

Requirements

• AngularJS
• Jsoneditor

Usage

You can get it from Bower

bower install bearmini-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 'bearmini.jsoneditor' module as a dependency to your application module:

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

Finally, add the directive to your html:

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

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.

Original version

Forked from https://github.com/angular-tools/ng-jsoneditor

Licence

The Artistic License 2.0: see LICENSE.md