rodikh/angular-json-editor

An angular wrapper for jdorn/json-editor

angular-json-editor's Issues

Acces editor from controller without buttons

Is it possible to acces de editor from the regular controller, as I don't have any buttons that need a buttons controller and need to validate the data?

onChange Event not fired for boolean and null property value

Hi,
I've a problem with json object with boolean property.
If i write my json through "Properties" button all works fine.
If i write my json through "JSON" button the onChange event is not fired if my object have a boolean or null property.
The result is that the layout is updated while my data isn't updated.
( I've used version 0.2.1 but i try to reproduce the same case also using your demo page with the latest version of plugin )

SCEditor - set readonly true.

Hello,

First of all, thanks for the awesome job with angular-json-editor.

When my angular view is loaded, I need to "disable" angular-json-editor through my controller.

For that, no problem using the "$scope.editor.disable();" function.

But, when a SCeditor is loaded within my JSON Schema, it does not get disabled. Reading the SCeditor, I've found in their API they have the "readonly" function that can be set to true on the fly. (ref.: http://www.sceditor.com/api/sceditor/readonly/)

The question is: whats the instance, inside $scope.editor to find the sceditor and fire this function?

change="evt" directive

Hi, if you ever have time to do that - could you add some kind of "change" event on json-editor directive such that parent controller would receive those events? Currently as a workaround I created data fiddling service but this relies on the fact that I have only one json-editor. Thanks for your lib!

How to mark a field as required?

Hi,

I am missing the possibility to access the current schema entry from the templating engine. When methods such as getFormInputField or getFormControl are called, I do not know how to access the part of the schema that is currently built.
I want to mark an HTML element with a required attribute so that it interfaces nicely with my page. Additionally this would enable us to use custom attributes in the schema to augment the view.

Missing startval with primitive data type as json

Hi,

my schema looks like:

{ "title" : "Integer Value",
  "type" : "number"
}

The startval should be e.g. 55.

But the generated input field of the json editor always contains 0. I debugged inside the jsonEditor directive definition and I found out, that the startval is not set, if the value is not an object.

if (angular.isObject(scope.startval)) {
                // Support both $http (i.e. $q) and $resource promises, and also normal object.
                startValPromise = $q.when(scope.startval);
}

I changed it to

if (angular.isDefined(scope.startval)) {
                // Support both $http (i.e. $q) and $resource promises, and also normal object.
                startValPromise = $q.when(scope.startval);
            }

Now it works fine.

Hope it helps,
Best regards,
Jerome

Title and Description rendering

In the original JSON editor, the title and description properties of a schema would be rendered on the UI so some metadata about a field could be displayed.

{
    "$schema": "http://json-schema.org/draft-06/schema#",
    "title": "Product",
    "description": "A product from Acme's catalog",
    "type": "object"
}

Does this library change the way the description would be rendered at all?

The description field is rendered when using the json-editor jsfiddles, but not when I'm using this directive.

Thanks

display_required_only in JSONEditorProvider ignored?

The GUI seems to behave as if this value is always set to true. Meaning, the editor always displays only the properties marked required in the schema, and you have to go into 'Properties' and check off all the non-required ones,

Other properties like disable_edit_json work fine.

Error: buttons-controller attribute must be a valid controller

Hi,

I keep getting this "buttons-controller attribute must be a valid controller" which I have no idea what's the error about.

Here is RuleController which used to load schema from a json file
`angular.module('project1App')
.controller('RuleController', ['$scope', '$http', function ($scope, $http) {

$scope.mySchema = $http.get('assets/json_schema/rule_schema.json');

}]);`

Button Controller
angular.module('project1App') .controller('ruleButtonController', ['$scope', function ($scope) { console.log($scope.editor.getValue()); }]);

Here is my view
`

<button type="submit" class="btn btn-success" ng-click="onSubmit($event)">
        <span class="glyphicon glyphicon-check"></span>
        Submit
    </button>

    <button type="button" class="btn btn-danger" ng-click="onAction2($event)">
        <span class="glyphicon glyphicon-remove"></span>
        Action 2
    </button>

    <button type="button" class="btn btn-primary" ng-click="changeSchema($event)">
        <span class="glyphicon glyphicon-plus"></span>
        Update Schema
    </button>      
</json-editor>

`

Any plans for Angular2 / Typescript?

How mature is this project?

Hi, I'd like to use your project. So, first, I'd like check with you if it:

• supports all the features as original json-editor does?
• is stable?
• are you going to support it in future?

Thanks!

Multiple grids in the same controller

I have a need to run about 4, maybe 5 completely different grids in the same controller, different configs, different schemas, different data. To make matters worse, they can't all load at once. Only when i execute the state machine function can they begin to load. I am moving as much as i can to models to eliminate the uber controllers, but just the way this is put together, its not realistic to do it completely.

How would i pull this off?

async editor doesn't take into account "format" schema property

I'm attempting to use Ace Editor in my editor.

When hard-coding my starting value, the editor respects the "format" schema property and properly loads Ace Editor in the respective fields.

When loading my starting value via a promise, the data will load, but Ace Editor will not toggle in the fields under which its supposed to be enabled.

If I should add any more technical details here which I haven't, let me know and I will (first time opening an issue in GitHub).

New version bug

Just updated to new version (We needed that auto-update feature - almost forked myself to do it), seems like the output is broken, It does render the UI but it looks broken (useless select boxes appears). before your update, we used the same schema and got perfectly rendered. I double checked my data and schema, nothing has changed except angular-json-editor version.

Can you please re-check your latest version?
I will keep investigating and update if I've found anything.

Alternative project with ng-model and schema change binding

I've found this other project with additional AngularJS features wrapping JSON Editor too.

https://github.com/mohsen1/angular-json-schema-form

May both developers could join efforts.

Custom validation

Is there any way to configure custom validation or custom editor interfaces with the directive as on the original plugin? Thanks

Schema Issue with Array

Hello,

I have this schema:
http://pastebin.com/W1Yf3f7m

When I try to parse it at original JSON Editor sandbox, no problem at all. I can see the original properties plus the Images and Images2 sub-levels with array and add button:
Ref.: Example at JSON Editor Sandbox

But, when I try it at Angular JSON Editor (latest version), the Images and Images2 are not displayed:

Any idea how to fix it?

styling didnt work

all styling is wrong,
my project uses angular 2 maybe this is the reason...

Updating startval has no effect

There is no watch on startval so changing it doesn't update the editor. I am using bindings to update the json-editor and this resulted in default values in the editor.

Usage:

<div ng-if="vm.selectedPlugin.editableObjectSchema">
    <json-editor schema="vm.selectedPlugin.editableObjectSchema" startval="vm.selectedPlugin.editableObject" buttons-controller="SyncButtonsController" on-change="onChange($editorValue)">
</div>

I hacked the directive to reload on startval change using the following code which seems to work. I had to modify the reset function so only a schema change would re-get the value from the editor, instead of always.

function restart() {
    var values = startVal;
    if (scope.editor && scope.editor.destroy) {
        scope.editor.destroy();
    }

    scope.editor = new JSONEditor(element[0], {
        startval: values,
        schema: schema
    }, true);

    scope.editor.on('ready', editorReady);
    scope.editor.on('change', editorChange);
    element.append(buttons);
}

snip

scope.$watch('schema', function (newVal, oldVal) {
    //update newScheme
    if (newVal.success) {
        newVal.success(function (data) {
            schema = data;
            if (scope.editor) {
                startVal = scope.editor.getValue();
            }
        });
    } else {
        schema = newVal;
        if (scope.editor) {
            startVal = scope.editor.getValue();
        }
    }

    restart();
}, true);

scope.$watch('startval', function (newVal, oldVal) {
    //update newScheme
    if (newVal && newVal.success) {
        newVal.success(function (data) {
            startVal = data;
        });
    } else {
        startVal = newVal;
    }

    restart();
}, true);

Optional buttons-controller?

Hi,
wouldn't it make sense to make buttons-controller optional? There 3 reasons why it might make sense to do that:

• you don't always want to have a controller but here you need to specify it. I use just angular.noop for this purpose.
• even if you have buttons you can use on-change event to get editor's value instead of buttons-controller
• button-controller has quite specialized name which makes it look like it's just for buttons.

Unable to access to the editor object without controller

Hi!

I needed to get access to the editor object. I saw in your demo that you could do it adding the controller, but in my case I need it to do it without adding it. After a lot of workarounds, I had to modify your library to get access to it through the scope, but I don't like to change external libraries.
Is there any clean way to get access to it? If not, could you apply the change I made?

(I just added this line)

(And then I can get it through the directive)

Thanks a lot! :)

json-editor not in npm dependencies

the dependencies section is empty in package.json ... i'm using npm and not bower ... i think this should be included in the dependencies section as it is in bower.

"additionalProperties": false does not prevent adding new properties

Setting "additionalProperties": false in the schema does not prevent adding new properties in the web interface. However, it invalidates the form, so the data can't be submitted. I can't find any way to delete the added property, except refreshing page, which will loose the form data.

Plugins (e.g. SCEditor) config support

Hi, how do I set plugin (e.g. SCEditor) options?

JsonEditorConfig.plugins.sceditor.style = /* url */ doesn't work because json-editor takes these properties from JSONEditor global object and in this lib JsonEditorConfig is manually merged into each instance config. The only (very hacky) solution I found is doing:

        window.JSONEditor.plugins = { // todo: add support for plugin properties in angular-json-editor
            sceditor: {
       //         style: '/components/SCEditor/minified/jquery.sceditor.default.min.css'
            }
        };

in angular.module(...).config. Not even $window because I can't use services in my config..

Error: buttons-controller attribute must be a valid controller

I'm getting this error just injecting $uibModalInstace from bootstrap modals, I have it loaded as I can inject it in the main controller of the json-editor, but not on the buttons-controller.

Any idea?
this is my buttons controller:

    .controller('AsyncButtonsController', function ($scope, $uibModalInstance) {
        $scope.onSubmit = function () {
            console.log('onSubmit data in async controller', $scope.editor.getValue());
        };

        $scope.onAction2 = function () {
            console.log('onAction2');
        };
        $scope.cancel = function () {
            $uibModalInstance.dismiss('cancel');

        }
    })

Thanks

Not able to use angular-json-editor and ng-jsoneditor together

Hey,

I'm stuck into a problem,
angular-json-editor and ng-json-editor both are using a json-editor.js file, so i'm facing some conflict problem and not able to solve issue by my self.

<json-editor schema="deviceSh" startval="deviceValSh" buttons-controller="addDeviceED1Ctrl" id='editor_holder'>
        </json-editor>

The directive above is loading ng-json-editor not angular-json-editor.

Cursor in the wrong place?

So weird -- the cursor is actually right at the end of Workshop 1. Any idea why it shows it over 4 or 5 spaces?

Themes are not working

Hi!

If I want to use other theme instead of bootstrap3 it shows this error (in this case, trying to load tailwind)

Thanks!

json-editor directive not updated when schema changes

The json-editor directive does not update when the schema variable changes. I am basically using the demo example. The json-editor directive is evaluated on page load with ajax-loaded schema. But when I load a new schema on that page, nothing happens. Should not the new schema be rendered by the directive automagically?

In controller, i have $scope.model.schema.
HTML:

<json-editor schema="model.schema" startval="model.startVal" buttons-controller="AsyncButtonsController"> 

Selectize.js Options Support

Hello,

I'm trying to use Selectize.js plugin supported by JSON Editor.
https://github.com/jdorn/json-editor#select2--selectize-support
http://brianreavis.github.io/selectize.js/

I can use the "enable: true" no problem with angular-json-editor, like this:

JSONEditorProvider.configure({
        selectize: {
            enable: true
        }
});

But, when I try to add Selectize options such as "create: false", it does not initialize it with them.

Any help?

How to get an instance of the current editor in order to set and get values from it?

Hi, I was wondering if you know how to get an instance of the current editor so I can use the methods
editor.getValue();
editor.setValue({
name: "John Smith"
}); ?

Unknown provider: nProvider <- n <- JSONEditor <- jsonEditorDirective <- JSONEditor

Impossible to use wrapper with enabled mangle Uglifier.new(mangle: true)

How to hide/disable the type drop down list after a field

watch on schema fails if promise is reassigned

In watch function on schema property new value should be checked if it promise or not and only if not current code should be executed.

How to inject select2 in angular-json-editor

We tried to include this plugin

plugins: {
select2: {
enable: true,
create: false,
script: 'js/lib/select2.min.js'
}
}

but not working.

Is it done in this way or need to add extra plugin. Please help to include select2 in angular-jason-editor

isValid not present on $scope

Im trying to add buttons to my view that bind to the isValid scope property to enable/disable the submit button depending on whether the form is valid or not.

It's not working for me, and when i use the chrome extension to check the scope of the json editor, I see my schema and startval on the scope but not the isValid property.

here is my view:
`Save

`

here is the controller:

angular.module('testApp')
    .controller('ChannelViewEditController', function ($scope, $http, $stateParams) {


        if ($stateParams.id) {
            $scope.myStartVal = $http.get(webBase + 'api/channels/' + $stateParams.id);
        }


        $scope.mySchema = $http.get('jsonschemas/' + $stateParams.ChannelTypeName + '.json');


        $scope.submit = function () {
            $http.post(webBase + '/api/boxes', JSON.stringify($scope.model))
                .then(function (res) {
                    $scope.response = res.data;
                });
        }

        $scope.onChange = function (model, editor) {
            debugger;
        }

                $scope.submit = function () {
                    $http.post(webBase + '/api/channels', JSON.stringify($scope.model))
                        .then(function (res) {
                            $scope.response = res.data;
                        });
                }
    });

I am doing something wrong here? Also, how can I pass the json editor control reference to my onChange function?

Thanks,

IE 11 not show Buttons

IE11 have problem in
element.append(buttons);

json-editor startval doesn't get updated in case of async load

Hi,

My HTML is as follows.
<json-editor schema="model.schema" startval="model.jsonValue" on-change="valueChanged($editorValue)"></json-editor>

I load model by async http call and this directive gets compiled before model gets real value.
Is there any way to provide 2-way binding with json variable itself rather than linking on-change function?

Thank you.