I am fairly new to AngularJS.
I am trying to bind an object to a textarea.
HTML:
</script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-5408099190056760" data-ad-slot="7305827575" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="relativetags"> 相关标签: </div> </div> <div class="fly-panel detail-box" id="flyReply"> <fieldset class="layui-elem-field layui-field-title" style="text-align: center;"> <legend>9条回答</legend> </fieldset> <ul class="jieda" id="jieda"> <li data-id="111"> <a name="item-1111111111"></a> <div class="detail-about detail-about-reply"> <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-127.html"> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/01/small_000000127.jpg" alt=" "> </a> <div class="fly-detail-user"> <a href="https://www.e-learn.cn/qa/u-127.html" class="fly-link"> <cite>爱一瞬间的悲伤 </cite> </a> </div> <div class="detail-hits"> <span>2020-12-05 04:43</span> </div> </div> <div class="detail-body jieda-body photos"> <p>Try this. It worked in my case</p> <p><code><textarea rows="5" cols="10" >{{menuItem.preset}}</textarea></code></p> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='839716'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="839716"> <i class="iconfont icon-svgmoban53"></i> 讨论(0) </span> <div class="jieda-admin"> </div> </div> <div class="comments-mod " style="display: none; float:none;padding-top:10px;" id="comment_839716"> <div class="areabox clearfix"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label> <div class="layui-input-block" style="margin-left:90px;"> <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" /> <input type='hidden' value='0' name='replyauthor' /> </div> <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="839716">提交评论 </span></div> </div> </form> </div> <hr> <ul class="my-comments-list nav"> <li class="loading"> <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' /> 加载中... </li> </ul> </div> </li> <li data-id="111"> <a name="item-1111111111"></a> <div class="detail-about detail-about-reply"> <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-51.html"> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000051.jpg" alt=" "> </a> <div class="fly-detail-user"> <a href="https://www.e-learn.cn/qa/u-51.html" class="fly-link"> <cite>旧巷少年郎 </cite> </a> </div> <div class="detail-hits"> <span>2020-12-05 04:44</span> </div> </div> <div class="detail-body jieda-body photos"> <p>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.</p> <p>http://jsfiddle.net/Ahsan_Aftab/bc7hd258/18/</p> <pre><code><!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> </code></pre> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='839717'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="839717"> <i class="iconfont icon-svgmoban53"></i> 讨论(0) </span> <div class="jieda-admin"> </div> </div> <div class="comments-mod " style="display: none; float:none;padding-top:10px;" id="comment_839717"> <div class="areabox clearfix"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label> <div class="layui-input-block" style="margin-left:90px;"> <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" /> <input type='hidden' value='0' name='replyauthor' /> </div> <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="839717">提交评论 </span></div> </div> </form> </div> <hr> <ul class="my-comments-list nav"> <li class="loading"> <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' /> 加载中... </li> </ul> </div> </li> <li data-id="111"> <a name="item-1111111111"></a> <div class="detail-about detail-about-reply"> <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-114.html"> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/01/small_000000114.jpg" alt=" "> </a> <div class="fly-detail-user"> <a href="https://www.e-learn.cn/qa/u-114.html" class="fly-link"> <cite>难免孤独 </cite> </a> </div> <div class="detail-hits"> <span>2020-12-05 04:46</span> </div> </div> <div class="detail-body jieda-body photos"> <p>Here is our JSON directive with validity checks:</p> <pre><code>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 ""; } }); } }; }); </code></pre> <p>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.</p> <p>Enjoy.</p> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='839712'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="839712"> <i class="iconfont icon-svgmoban53"></i> 讨论(0) </span> <div class="jieda-admin"> </div> </div> <div class="comments-mod " style="display: none; float:none;padding-top:10px;" id="comment_839712"> <div class="areabox clearfix"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label> <div class="layui-input-block" style="margin-left:90px;"> <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" /> <input type='hidden' value='0' name='replyauthor' /> </div> <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="839712">提交评论 </span></div> </div> </form> </div> <hr> <ul class="my-comments-list nav"> <li class="loading"> <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' /> 加载中... </li> </ul> </div> </li> <li data-id="111"> <a name="item-1111111111"></a> <div class="detail-about detail-about-reply"> <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-17.html"> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/00/small_000000017.jpg" alt=" "> </a> <div class="fly-detail-user"> <a href="https://www.e-learn.cn/qa/u-17.html" class="fly-link"> <cite>陌清茗 </cite> </a> </div> <div class="detail-hits"> <span>2020-12-05 04:52</span> </div> </div> <div class="detail-body jieda-body photos"> <p>You can do that in two steps :</p> <ul> <li>Create a filter that'll stringify JSON (http://docs.angularjs.org/guide/dev_guide.templates.filters.creating_filters)</li> <li><code>$scope.watch</code> the field to save it when it changes (example http://jsfiddle.net/ceJ4w/)</li> </ul> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='839715'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="839715"> <i class="iconfont icon-svgmoban53"></i> 讨论(0) </span> <div class="jieda-admin"> </div> </div> <div class="comments-mod " style="display: none; float:none;padding-top:10px;" id="comment_839715"> <div class="areabox clearfix"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label> <div class="layui-input-block" style="margin-left:90px;"> <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" /> <input type='hidden' value='0' name='replyauthor' /> </div> <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="839715">提交评论 </span></div> </div> </form> </div> <hr> <ul class="my-comments-list nav"> <li class="loading"> <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' /> 加载中... </li> </ul> </div> </li> <li data-id="111"> <a name="item-1111111111"></a> <div class="detail-about detail-about-reply"> <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-115.html"> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/01/small_000000115.jpg" alt=" "> </a> <div class="fly-detail-user"> <a href="https://www.e-learn.cn/qa/u-115.html" class="fly-link"> <cite>时光说笑 </cite> </a> </div> <div class="detail-hits"> <span>2020-12-05 04:53</span> </div> </div> <div class="detail-body jieda-body photos"> <p>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.</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>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" } }; } ]);</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre> </div> </div> </p> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='839710'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="839710"> <i class="iconfont icon-svgmoban53"></i> 讨论(0) </span> <div class="jieda-admin"> </div> </div> <div class="comments-mod " style="display: none; float:none;padding-top:10px;" id="comment_839710"> <div class="areabox clearfix"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label> <div class="layui-input-block" style="margin-left:90px;"> <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" /> <input type='hidden' value='0' name='replyauthor' /> </div> <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="839710">提交评论 </span></div> </div> </form> </div> <hr> <ul class="my-comments-list nav"> <li class="loading"> <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' /> 加载中... </li> </ul> </div> </li> <li data-id="111"> <a name="item-1111111111"></a> <div class="detail-about detail-about-reply"> <a class="fly-avatar" href="https://www.e-learn.cn/qa/u-131.html"> <img src="https://www.e-learn.cn/qa/data/avatar/000/00/01/small_000000131.jpg" alt=" "> </a> <div class="fly-detail-user"> <a href="https://www.e-learn.cn/qa/u-131.html" class="fly-link"> <cite>终归单人心 </cite> </a> </div> <div class="detail-hits"> <span>2020-12-05 04:54</span> </div> </div> <div class="detail-body jieda-body photos"> <p>You need a custom directive that parses the input to an object, and displays the object as a string, respectively:</p> <p>Something like:</p> <pre class="lang-javascript prettyprint-override"><code>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); } }; }); </code></pre> <pre class="lang-html prettyprint-override"><code><textarea json-text rows="5" cols="10" ng-model="menuItem.preset"></textarea> </code></pre> <p>Fiddle: http://jsfiddle.net/HzYQn/</p> <div class="appendcontent"> </div> </div> <div class="jieda-reply"> <span class="jieda-zan button_agree" type="zan" data-id='839709'> <i class="iconfont icon-zan"></i> <em>0</em> </span> <span type="reply" class="showpinglun" data-id="839709"> <i class="iconfont icon-svgmoban53"></i> 讨论(0) </span> <div class="jieda-admin"> </div> </div> <div class="comments-mod " style="display: none; float:none;padding-top:10px;" id="comment_839709"> <div class="areabox clearfix"> <form class="layui-form" action=""> <div class="layui-form-item"> <label class="layui-form-label" style="padding-left:0px;width:60px;">发布评论:</label> <div class="layui-input-block" style="margin-left:90px;"> <input type="text" placeholder="不少于5个字" AUTOCOMPLETE="off" class="comment-input layui-input" name="content" /> <input type='hidden' value='0' name='replyauthor' /> </div> <div class="mar-t10"><span class="fr layui-btn layui-btn-sm addhuidapinglun" data-id="839709">提交评论 </span></div> </div> </form> </div> <hr> <ul class="my-comments-list nav"> <li class="loading"> <img src='https://www.e-learn.cn/qa/static/css/default/loading.gif' align='absmiddle' /> 加载中... </li> </ul> </div> </li> <div style="text-align: center"> <div class="laypage-main"> <strong>1</strong> <a href="https://www.e-learn.cn/qa/q-244036/2.html">2</a> <a class="n" href="https://www.e-learn.cn/qa/q-244036/2.html">下一页</a> </div> </div> <style> .laypage-main a, .laypage-main span { display: inline-block; } </style> </ul> <div class="layui-form layui-form-pane"> <form id="huidaform" name="answerForm" method="post"> <div class="layui-form-item layui-form-text"> <a name="comment"></a> <div class="layui-input-block"> <script type="text/javascript" src="https://www.e-learn.cn/qa/static/js/neweditor/ueditor.config.js"></script> <script type="text/javascript" src="https://www.e-learn.cn/qa/static/js/neweditor/ueditor.all.js"></script> <script type="text/plain" id="editor" name="content" style="width:100%;height:200px;"></script> <script type="text/javascript"> var isueditor=1; var editor = UE.getEditor('editor',{ //这里可以选择自己需要的工具按钮名称,此处仅选择如下五个 toolbars:[['source','fullscreen', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'link', 'unlink', 'anchor', '|', 'simpleupload', 'insertimage', 'scrawl', 'insertvideo', 'attachment', 'map', 'insertcode', '|', 'horizontal', '|', 'preview', 'searchreplace', 'drafts']], initialContent:'', //关闭字数统计 wordCount:false, zIndex:2, //关闭elementPath elementPathEnabled:false, //默认的编辑区域高度 initialFrameHeight:250 //更多其他参数，请参考ueditor.config.js中的配置项 //更多其他参数，请参考ueditor.config.js中的配置项 }); editor.ready(function() { editor.setDisabled(); }); $("#editor").find("*").css("max-width","362px"); </script> </div> </div> <div class="layui-form-item"> <label for="L_vercode" class="layui-form-label">验证码</label> <div class="layui-input-inline"> <input type="text" id="code" name="code" value="" required lay-verify="required" placeholder="图片验证码" autocomplete="off" class="layui-input"> </div> <div class="layui-form-mid"> <span style="color: #c00;"><img class="hand" src="https://www.e-learn.cn/qa/user/code.html" onclick="javascript:updatecode();" id="verifycode"><a class="changecode" href="javascript:updatecode();"> 看不清?</a></span> </div> </div> <div class="layui-form-item"> <input type="hidden" value="244036" id="ans_qid" name="qid"> <input type="hidden" id="tokenkey" name="tokenkey" value=''/> <input type="hidden" value="AngularJS: textarea bind to JSON object shows “object-object”" id="ans_title" name="title"> <div class="layui-btn layui-btn-disabled" id="ajaxsubmitasnwer" >提交回复</div> </div> </form> </div> </div> <input type="hidden" value="244036" id="adopt_qid" name="qid" /> <input type="hidden" id="adopt_answer" value="0" name="aid" /> </div> <div class="layui-col-md4"> <!-- 热门讨论问题 --> <dl class="fly-panel fly-list-one"> <dt class="fly-panel-title">热议问题</dt> <!-- 本周热门讨论问题显示10条-->
