ng-jsoneditor demo

by jonahe

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/josdejong/jsoneditor/master/dist/jsoneditor.min.css">
<script src="https://cdn.rawgit.com/josdejong/jsoneditor/master/dist/jsoneditor.min.js"></script>
<script src="https://cdn.rawgit.com/angular-tools/ng-jsoneditor/master/ng-jsoneditor.js"></script>
<div ng-app="ngApp" ng-controller="ngCtrl">
    <div ng-jsoneditor="onLoad" ng-model="obj.data" options="obj.options" style="width: 400px; height: 300px;"></div>

    <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>

</div>

JavaScript

var json = {"Array": [1, 2, 3], "Boolean": true, "Null": null, "Number": 123, "Object": {"a": "b", "c": "d"}, "String": "Hello World"};

    angular.module('ngApp', ['ng.jsoneditor']).controller('ngCtrl', function ($scope) {
        $scope.obj = {data: json, options: {mode: 'c'}};
        $scope.onLoad = function (instance) {
            instance.expandAll();
        };
        $scope.changeData = function () {
            $scope.obj.data = {foo: 'bar'};
        };
        $scope.changeOptions = function () {
            $scope.obj.options.mode = $scope.obj.options.mode == 'tree' ? 'code' : 'tree';
        };

        //other
        $scope.pretty = function (obj) {
            return angular.toJson(obj, true);
        }
    });