Angular JSON Editor POC
This is a proof of concept for the AngularJS wrapper for Jason Dorn's JSON editor.
HTML
<script src="https://raw.github.com/jdorn/json-editor/master/dist/jsoneditor.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script src="https://raw.githubusercontent.com/rodikh/angular-json-editor/master/src/angular-json-editor.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div ng-app="app">
<div class="container" ng-controller="AppController">
<json-editor schema="mySchema" startval="myStartVal" on-change="onChange($editorValue)"></json-editor>
<div>
Name: {{myStartVal.name}}
Age: {{myStartVal.age}}
</div>
</div>
</div>
JavaScript
var app = angular.module('app', ['angular-json-editor']);
app.config(function(JSONEditorProvider) {
JSONEditorProvider.configure({
defaults: {
options: {
iconlib: 'bootstrap3',
theme: 'bootstrap3'
}
}
});
});
app.controller('AppController', function ($scope) {
$scope.mySchema = {
type: 'object',
properties: {
name: {
type: 'string',
title: 'Name',
required: true,
minLength: 1
},
age: {
type: 'integer',
title: 'Age',
required: true,
min: 0
}
}
};
$scope.myStartVal = {
age: 20
};
$scope.onChange = function(data) {
$scope.myStartVal = data;
}
});