angular-jsoneditor
Version:
Angular wrapper for jsoneditor
72 lines (68 loc) • 2.43 kB
HTML
<html ng-app="ngApp">
<head>
<meta charset="utf-8">
<title>Demo for angular-jsoneditor</title>
<script src="../node_modules/angular/angular.js" type="text/javascript"></script>
<script src="../dist/angular-jsoneditor.js" type="text/javascript"></script>
<style type="text/css" media="screen">
.wrapper {
margin: 50px auto;
width: 1000px;
}
.col {
float: left;
width: 50%
}
.pdL4 {
padding-left: 40px;
}
</style>
</head>
<body>
<div ng-controller="ngCtrl" class="wrapper">
<div class="col">
<angular-jsoneditor ng-model="obj.data" options="obj.options" style="width: 100%; height: 400px;"></angular-jsoneditor>
</div>
<div class="col">
<div class="pdL4">
<button type="button" class="btn btn-primary" ng-click="changeData()"><i class="fa fa-check-circle"></i>
change data
</button>
<button type="button" class="btn btn-primary" ng-click="changeOptions()"><i class="fa fa-check-circle"></i>
change options
</button>
<pre>{{pretty(obj.data)}}</pre>
<input type="text" ng-model="obj.data.String">
</div>
</div>
</div>
<script type="text/javascript">
var json = {
"Array": [1, 2, 3], "Boolean": true, "Null": null, "Number": 123,
"Object": {"a": "b", "c": "d"}, "String": "Hello World",
"auto": "$Hello World"
};
angular.module('ngApp', ['angular-jsoneditor']).controller('ngCtrl', function ($scope) {
$scope.obj = {data: json, options: {mode: 'tree'}};
$scope.onLoad = function (instance) {
instance.expandAll();
this.options.mode = 'code';
this.options.completer = [
{value: "$sameer", score: 1000, meta: "custom"},
{value: "$rathore", score: 1000, meta: "custom"}
];
};
$scope.changeData = function () {
$scope.obj.data = {foo: 'bar'};
};
$scope.changeOptions = function () {
$scope.obj.options.mode = $scope.obj.options.mode == 'tree' ? 'code' : 'tree';
};
$scope.pretty = function (obj) {
return obj;
};
});
</script>
</body>
</html>