AngularJS：文本绑定到JSON对象显示＆QUOT;对象物体QUOT; [英] AngularJS: textarea bind to JSON object shows "object-object"
本文介绍了AngularJS：文本绑定到JSON对象显示＆QUOT;对象物体QUOT;的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是相当新的AngularJS。
我试图对象绑定到一个textarea。
HTML
＆LT; textarea的行数=5COLS =10NG-模式=菜单项preSET。＆GT;＆LT; / textarea的＆GT;
型号：
{
种：标题，
标签：ADD_TITLE
iconSrc：textTitle.png，
experimentInclude：，
experimentExclude：三
preSET：{
compType：richTitle，
styleId：txtNew
}
}
结果：
我怎样才能显示JSON字符串化（后来将其保存为一个对象再次）？
解决方案
我刚刚研究了什么，我认为是这样做的最正确的方式，因为我需要为我的https://github.com/vorburger/MUI.js ......所以的这里是一个Plonker 我的解决方案。它是基于＆安培;本质上是一种特殊的情况下（即一个应用程序）相关的Q 如何做angular.js双向过滤？中添加的转折是，模型的更新也应该改变文本框..这是什么手表$ / $ setViewValue / $渲染的东西呢。
\r
\r\r
\r VAR应用= angular.module（'应用'，[]）;\r
\r
app.directive（'jsonText'，函数（）{\r
返回{\r
限制：'A'，//只激活元素属性\r
要求：'ngModel'，//得到NgModelController的举行\r
链接：功能（范围，元素，ATTRS，ngModelCtrl）{\r
\r
VAR lastValid;\r
\r
//推（）如果不是的unshift（），并果更快。在IE8和更早的版本（不印字不）\r
ngModelCtrl $ parsers.push（FROMUSER）。\r
ngModelCtrl $ formatters.push（至用户）。\r
\r
//清除污点的变化无效\r
element.bind（'模糊'，函数（）{\r
element.val（TOUSER（$范围的eval（attrs.ngModel）））;\r
}）;\r
\r
// $腕表（attrs.ngModel）如果此指令创建一个新的范围将无法正常工作;\r
//看到http://stackoverflow.com/questions/14693052/watch-ngmodel-from-inside-directive-using-isolate-scope如何做到这一点，然后\r
范围。$腕表（attrs.ngModel，功能（为newValue，属性oldValue）{\r
lastValid = lastValid ||为newValue;\r
\r
如果（为newValue！=属性oldValue）{\r
ngModelCtrl $ setViewValue（TOUSER（newValue）以）。\r
\r
// TODO避免这种情况导致丢失输入的焦点..\r
。ngModelCtrl $渲染（）;\r
}\r
}，真正的）; //必须使用objectEquality（真）在这里，由于某种原因..\r
\r
功能FROMUSER（文本）{\r
//当心：TRIM（）是不是在旧的浏览器可用\r
如果（！文本|| text.trim（）===''）{\r
返回{};\r
}其他{\r
尝试{\r
lastValid = angular.fromJson（文本）;\r
ngModelCtrl $ setValidity（'invalidJson'，真）。\r
}赶上（E）{\r
ngModelCtrl $ setValidity（'invalidJson'，虚假）。\r
}\r
返回lastValid;\r
}\r
}\r
\r
功能TOUSER（对象）{\r
//比JSON.stringify（）更好，因为它格式+过滤器hashKey $$等。\r
返回angular.toJson（对象，真正的）;\r
}\r
}\r
};\r
}）;\r
\r
\r
app.controller（按Ctrl'，['$范围'，\r
功能（$范围）{\r
$ scope.model = {};\r
$ scope.model.data = {\r
种：标题，\r
标签：ADD_TITLE\r
iconSrc：textTitle.png，\r
experimentInclude：，\r
experimentExclude：三\r
preSET：{\r
compType：richTitle，\r
styleId：txtNew\r
}\r
};\r
}\r
]）; \r
＆LT;脚本SRC =https://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js＆GT;＆下; /脚本＆GT;\r
＆LT; DIV NG-应用=应用程序级=容器＆GT;\r
＆LT; DIV NG控制器=CTRL级=行＆GT;\r
＆LT; textarea的JSON文本NG-模式='model.data行=15＆GT;＆LT; / textarea的＆GT;\r
＆所述p为H.; {{model.data}}＆下; / P＆GT;\r
＆LT; / DIV＆GT;\r
＆LT; / DIV＆GT; \r
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)?
解决方案
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 http://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>
这篇关于AngularJS：文本绑定到JSON对象显示＆QUOT;对象物体QUOT;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
