AngularJS: textarea bind to JSON object shows "object-object"
angularjs
Solution
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/
Problem
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)?