Angular.js directive for Jos de Jong's JSON Editor. Website: http://angularjsoneditor.oqbox.com
- Bootstrap
- jQuery
- AngularJS
- Jsoneditor
Load the script files in your application:
<!DOCTYPE html>
<html lang="en">
<head>
...
<title>Angular JSON Editor Directives</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/jsoneditor.css">
<link rel="stylesheet" href="css/angular-json-editor.css">
<script src="js/angularjs/angular.min.js"></script>
<script src="js/jsoneditor/jsoneditor.min.js"></script>
<script src="js/angular-json-editor/angular-json-editor.js"></script>
...
</head>
<body>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>Add the 'angular-json-editor' module as a dependency to your application module:
var myAppModule = angular.module('MyApp', ['angular-json-editor']);Finally, add the directive to your html:
<div style="height: 400px;" json-editor type="text" model="obj" options="options"/>Link http://angularjsoneditor.oqbox.com
myAppModule.controller('MyController', [ '$scope', function($scope) {
$scope.people={
"name": "Mr A. Payne",
"address": {
"street": "30 Commercial Road",
"city area/district": "Fratton"
}
};
$scope.configuration={
"editable": false,
"viewButtonClass": "btn-info",
"editButtonClass": "btn-success"
};
$scope.options={
"mode": "code",
"modes": [
"tree",
"form",
"code",
"text"
],
"history": false
};
});Input directive:
<json-editor-input model="people" configuration="configuration"/>Or full editor directive:
<div json-editor model="people" options="options" style="height: 400px;"/>