ng-jsoneditor

WebJar for ng-jsoneditor

License	Artistic-License-2.0
Categories	Github Development Tools Version Controls Angular User Interface Web Frameworks JSON Data
GroupId	org.webjars.bower
ArtifactId	github-com-angular-tools-ng-jsoneditor
Last Version	1.5
Release Date	Nov 6, 2017
Type	jar
Description	ng-jsoneditor WebJar for ng-jsoneditor
Project URL	http://webjars.org
Source Code Management	https://github.com/angular-tools/ng-jsoneditor

Download github-com-angular-tools-ng-jsoneditor

Filename	Size
github-com-angular-tools-ng-jsoneditor-1.5.pom
github-com-angular-tools-ng-jsoneditor-1.5.jar	10 KB
github-com-angular-tools-ng-jsoneditor-1.5-sources.jar	22 bytes
github-com-angular-tools-ng-jsoneditor-1.5-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.bower/github-com-angular-tools-ng-jsoneditor/ -->
<dependency>
    <groupId>org.webjars.bower</groupId>
    <artifactId>github-com-angular-tools-ng-jsoneditor</artifactId>
    <version>1.5</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.bower/github-com-angular-tools-ng-jsoneditor/
implementation 'org.webjars.bower:github-com-angular-tools-ng-jsoneditor:1.5'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.bower/github-com-angular-tools-ng-jsoneditor/
implementation ("org.webjars.bower:github-com-angular-tools-ng-jsoneditor:1.5")

Apache Buildr

'org.webjars.bower:github-com-angular-tools-ng-jsoneditor:jar:1.5'

Apache Ivy

<dependency org="org.webjars.bower" name="github-com-angular-tools-ng-jsoneditor" rev="1.5">
  <artifact name="github-com-angular-tools-ng-jsoneditor" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.bower', module='github-com-angular-tools-ng-jsoneditor', version='1.5')
)

Scala SBT

libraryDependencies += "org.webjars.bower" % "github-com-angular-tools-ng-jsoneditor" % "1.5"

Leiningen

[org.webjars.bower/github-com-angular-tools-ng-jsoneditor "1.5"]

Dependencies

compile (2)

Group / Artifact	Type	Version
org.webjars.bower : angular	jar	[1,2)
org.webjars.bower : jsoneditor	jar	[4,5)

Project Modules

There are no modules declared in this project.

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

Versions

Version
1.5 Nov 6, 2017