AngularJS: textarea bind to JSON object shows "object-object"

Question

I am fairly new to AngularJS.

I am trying to bind an object to a textarea.

HTML:

<textarea rows="5" cols="10" ng-model="menuItem.preset"></textarea>

Model:

{
    "kind": "title",
    "label": "ADD_TITLE",
    "iconSrc": "textTitle.png",
    "experimentInclude": "",
    "experimentExclude": "three",
    "preset": {
        "compType": "richTitle",
        "styleId": "txtNew"
    }
}

Result:

How can I show the JSON stringified (and later save it as an object again)?

question from:https://stackoverflow.com/questions/17893708/angularjs-textarea-bind-to-json-object-shows-object-object

Answer 1

You need a custom directive that parses the input to an object, and displays the object as a string, respectively:

Something like:

angular.module('yourApp').directive('jsonText', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attr, ngModel) {            
          function into(input) {
            return JSON.parse(input);
          }
          function out(data) {
            return JSON.stringify(data);
          }
          ngModel.$parsers.push(into);
          ngModel.$formatters.push(out);

        }
    };
});

<textarea json-text rows="5" cols="10" ng-model="menuItem.preset"></textarea>

Fiddle: http://jsfiddle.net/HzYQn/