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

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/