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:
Add the 'ng.jsoneditor' module as a dependency to your application module:
var myAppModule = angular;
Finally, add the directive to your html:
Demo
http://jsfiddle.net/angulartools/sd3at5ek/
Sample code
myAppModule;
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:
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
the $scope.editorLoaded
function will be called with the Jsoneditor instance as first argument
myAppModule;
Contributors
- Sanchit Bhatnagar
- Manuel B.
- Alan blount
Licence
The Artistic License 2.0: see LICENSE.md