AngularJS JSON Editor toggle editable

Question

Currently, I'm using ng-jsoneditor.

I'm trying to toggle the state from editable to read-only.

To set the readonly property I have to specify the onEditable property of the options property. For instance:

 $scope.obj = {
            data: json, 
            options: {
                mode: 'tree',
                onEditable: function(){return false;}
            }
  };

I am able to get the changeOptions property to toggle the mode property, however I cannot get the onEditable property to toggle. I want the user to have the capability to edit the json while in the 'code' mode. This is what I tried:

    $scope.changeOptions = function () {
        $scope.obj.options.mode = $scope.obj.options.mode == 'tree' ? 'code' : 'tree';
        $scope.obj.options.onEditable = $scope.obj.options.onEditable == function(){return false;} ?  function(){return true;} :  function(){return false;};
    };

JsFiddle Example

aitchkhan · Accepted Answer · 2017-10-07 05:28:15Z

1

Edit:

Didn't quite get your question at first, my bad.

In your example what you were doing wrong was checking a variable for a function definition which is onEditable(), which quite does not work.

So what I did was check if mode is tree or code then assign a function to onEditable option of ng-jsoneditor.

Here is the updated fiddle.

PS: I did clean some code as well.

edited Oct 7, 2017 at 5:28

answered Oct 6, 2017 at 19:22

aitchkhan

1,9621 gold badge20 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

phil o.O Over a year ago

Oh yea? Did you test the demo? Did you notice the demo allows you to edit both in tree mode and code mode? I want to disable the capabilities of editing while in tree mode. The use case is basically, while in tree mode make the editor read only and while in code mode allow the user to modify the json.

aitchkhan Over a year ago

@PhiL please check now.

Collectives™ on Stack Overflow

AngularJS JSON Editor toggle editable

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related