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)?
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/
return JSON.stringify(data, undefined, 2);scope.$watch(attr.ngModel, function(newValue) {element[0].value = out(newValue); }, true);
I’ve just researched what I believe to be the most “proper” way of doing this, as I needed it for my https://github.com/vorburger/MUI.js... So here is a Plonker with my solution. It’s based on & is essentially a special case (i.e. an application of) the related Q How to do two-way filtering in angular.js? The added twist is that model updates should also change the textbox.. that's what the $watch / $setViewValue / $render thing does.
var app = angular.module('app', []);
app.directive('jsonText', function() {
return {
restrict: 'A', // only activate on element attribute
require: 'ngModel', // get a hold of NgModelController
link: function(scope, element, attrs, ngModelCtrl) {
var lastValid;
// push() if faster than unshift(), and avail. in IE8 and earlier (unshift isn't)
ngModelCtrl.$parsers.push(fromUser);
ngModelCtrl.$formatters.push(toUser);
// clear any invalid changes on blur
element.bind('blur', function() {
element.val(toUser(scope.$eval(attrs.ngModel)));
});
// $watch(attrs.ngModel) wouldn't work if this directive created a new scope;
// see https://stackoverflow.com/questions/14693052/watch-ngmodel-from-inside-directive-using-isolate-scope how to do it then
scope.$watch(attrs.ngModel, function(newValue, oldValue) {
lastValid = lastValid || newValue;
if (newValue != oldValue) {
ngModelCtrl.$setViewValue(toUser(newValue));
// TODO avoid this causing the focus of the input to be lost..
ngModelCtrl.$render();
}
}, true); // MUST use objectEquality (true) here, for some reason..
function fromUser(text) {
// Beware: trim() is not available in old browsers
if (!text || text.trim() === '') {
return {};
} else {
try {
lastValid = angular.fromJson(text);
ngModelCtrl.$setValidity('invalidJson', true);
} catch (e) {
ngModelCtrl.$setValidity('invalidJson', false);
}
return lastValid;
}
}
function toUser(object) {
// better than JSON.stringify(), because it formats + filters $$hashKey etc.
return angular.toJson(object, true);
}
}
};
});
app.controller('Ctrl', ['$scope',
function($scope) {
$scope.model = {};
$scope.model.data = {
"kind": "title",
"label": "ADD_TITLE",
"iconSrc": "textTitle.png",
"experimentInclude": "",
"experimentExclude": "three",
"preset": {
"compType": "richTitle",
"styleId": "txtNew"
}
};
}
]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div ng-app="app" class="container">
<div ng-controller="Ctrl" class="row">
<textarea json-text ng-model='model.data' rows="15"></textarea>
<p>{{ model.data }}</p>
</div>
</div>
try with json filter
<textarea rows="5" cols="10" >
{{ menuItem.preset | json }}
</textarea>
Here is our JSON directive with validity checks:
app.directive('jsonInput', function () {
'use strict';
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, elem, attr, ctrl) {
ctrl.$parsers.unshift(function(input) {
try {
var obj = JSON.parse(input);
ctrl.$setValidity('jsonInput', true);
return obj;
} catch (e) {
ctrl.$setValidity('jsonInput', false);
return null;
}
});
ctrl.$formatters.unshift(function(data) {
if (data == null) {
ctrl.$setValidity('jsonInput', false);
return "";
}
try {
var str = JSON.stringify(data);
ctrl.$setValidity('jsonInput', true);
return str;
} catch (e) {
ctrl.$setValidity('codeme', false);
return "";
}
});
}
};
});
When the user enters invalid JSON, the model is null. When the model contains circular references or is null, the user will see an empty string ("") and the input is invalid.
Enjoy.
also you can define toString method on your model:
$scope.menuItem.preset.toString = function(){
return JSON.stringify(this);
}
and then to synchronise back use watch
but it looks more like dirty hack than solution
Is using the ng-change event too messy?
<textarea ng-model="textmainboardJSON" ng-change="updateMainboard()"
You can do that in two steps :
$scope.watch the field to save it when it changes (example http://jsfiddle.net/ceJ4w/)
Try this. It worked in my case
<textarea rows="5" cols="10" >{{menuItem.preset}}</textarea>
I have simple way to bind arrays data to text area in angularjs. When there are two arrays and you need to show them parallel. Further you can get it on jsfiddle as well.
http://jsfiddle.net/Ahsan_Aftab/bc7hd258/18/
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<textarea ng-model="TextAreacodeGroups" style="width:52%;height:200px;" columns="25" id="code_groups">
{{CodeGroupsFun()}}
</textarea>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
var combined;
var array1=['01','02','03','04'];
var array2= ['Students','Teachers','Managers','Operators'];
$scope.CodeGroupsFun = function () {
$scope.TextAreacodeGroups =
combined = array1.map(function (e, i) {
return '\n' + array1[i] + ' - ' + array2[i];
});
};
});
</script>
</body>
</html>