blocks|key|4640371|text|Angular有一个用于显示JSON的内置filter|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4640372|<pre>{{data+%7C+json}}</pre>|code-block|syntax|javascript|4640373|请注意，使用pre-tag来保留空格和换行符|4640374|演示：|4640375|​|4640376|angular.module('app',+[])
++.controller('Ctrl',+['$scope',
++++function($scope)+{

++++++$scope.data+=+{
++++++++a:+1,
++++++++b:+2,
++++++++c:+{
++++++++++d:+"3"
++++++++},
++++++};

++++}
++]);|4640377|<!DOCTYPE+html>
<html+ng-app="app">

++<head>
++++<script+data-require="angular.js@1.2.15"+data-semver="1.2.15"+src="//code.angularjs.org/1.2.15/angular.js"></script>
++</head>

++<body+ng-controller="Ctrl">
++++<pre>{{data+%7C+json}}</pre>
++</body>

</html>|4640378|4640379|还有一个angular.toJson方法，但我还没有尝试过(Docs)|4640380|entityMap|0|LINK|mutability|MUTABLE|url|http://docs.angularjs.org/api/ng/function/angular.toJson^0|E|4|L|6|0|0|6|3|0|0|0|0|0|0|4|E|U|4|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@$9|16|A|17|B|C]|$9|18|A|19|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1A|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|1E|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1F|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|1G|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|H|7|1H|8|@]|D|@]|E|$I|J]]|$1|U|3|P|5|6|7|1I|8|@]|D|@]|E|$]]|$1|V|3|W|5|6|7|1J|8|@$9|1K|A|1L|B|C]]|D|@$9|1M|A|1N|1|1O]]|E|$]]|$1|X|3|-4|5|6|7|1P|8|@]|D|@]|E|$]]]|Y|$Z|$5|10|11|12|E|$13|14]]]]

Angular has a built-in <code>filter</code> for showing <code>JSON</code>

<pre><code>&lt;pre&gt;{{data | json}}&lt;/pre&gt;
</code></pre>

Note the use of the <code>pre</code>-tag to conserve whitespace and linebreaks

Demo:

<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>angular.module('app', [])
 .controller('Ctrl', ['$scope',
 function($scope) {

 $scope.data = {
 a: 1,
 b: 2,
 c: {
 d: "3"
 },
 };

 }
 ]);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html ng-app="app"&gt;

 &lt;head&gt;
 &lt;script data-require="angular.js@1.2.15" data-semver="1.2.15" src="//code.angularjs.org/1.2.15/angular.js"&gt;&lt;/script&gt;
 &lt;/head&gt;

 &lt;body ng-controller="Ctrl"&gt;
 &lt;pre&gt;{{data | json}}&lt;/pre&gt;
 &lt;/body&gt;

&lt;/html&gt;</code></pre>
</div>
</div>


There's also an <code>angular.toJson</code> method, but I haven't played around with that (<a href="http://docs.angularjs.org/api/ng/function/angular.toJson">Docs</a>)

blocks|key|4640422|text|如果您希望将JSON呈现为HTML，并且可以折叠/打开它，您可以使用我刚才创建的这个指令来很好地呈现它：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4640423|https://github.com/mohsen1/json-formatter/|offset|length|4640424|​|4640425|📷|atomic|4640426|4640427|entityMap|0|LINK|mutability|MUTABLE|url|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/645ebba2de2580843e910117c74d7683.png|imageAlt^0|0|0|16|0|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@$D|10|E|11|1|12]]|A|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|14|8|@]|9|@$D|15|E|16|1|17]]|A|$]]|$1|K|3|G|5|6|7|18|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|C]]|S|$5|T|P|U|A|$V|W|X|-4]]]]

If you are looking to render JSON as HTML and it can be collapsed/opened, you can use this directive that I just made to render it nicely:

<a href="https://github.com/mohsen1/json-formatter/" rel="noreferrer">https://github.com/mohsen1/json-formatter/</a>

<img src="https://i.stack.imgur.com/QCKCO.png" alt="enter image description here">

blocks|key|4640443|text|如果想格式化JSON并进行一些语法突出显示，可以使用ng-prettyjson指令。See+the+npm+package.|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4640444|下面是如何使用它：<pre+pretty-json="jsonObject"></pre>|4640445|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/ng-prettyjson^0|Q|D|16|K|0|0|9|10|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]]|D|@$9|S|A|T|1|U]]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]]]

If you want to format the JSON and also do some syntax highlighting, you can use the <code>ng-prettyjson</code> directive. <a href="https://www.npmjs.com/package/ng-prettyjson" rel="nofollow">See the npm package.</a>

Here is how to use it: <code>&lt;pre pretty-json="jsonObject"&gt;&lt;/pre&gt;</code>

I have an AngularJS application, which collects data from input, transforms a model into a string using <code>JSON.stringify()</code> and lets a user edit this model in such a way that input fields get updated if the <code>&lt;textarea&gt;</code> element is updated and vice versa. Some kind of two-way binding :)

The problem is that the String itself looks ugly and I would like to format it so it looks like this:

<img src="https://i.stack.imgur.com/A1gCv.jpg" alt="enter image description here">

And not like it looks now:

<img src="https://i.stack.imgur.com/GM02z.jpg" alt="enter image description here">

Any ideas how this can be accomplished? If you need some additional info - don't hesitate asking. Every answer is highly appreciated and answered immediately.

Thank you.

P.S. I guess this should be some kind of directive or a custom filter. Data itself SHOULD NOT be changed, only the output.

AngularJS format JSON string output

JSON

我有一个AngularJS应用程序，它从输入收集数据，使用JSON.stringify()将模型转换为字符串，并允许用户编辑此模型，如果<textarea>元素更新，则输入字段将更新，反之亦然。某种双向绑定:)问题是字符串本身看起来很难看，我想要格式化它，使它看起来像这样：​​而且不像现在看起来的那样：​​有什么想法可...

问AngularJS格式JSON字符串输出
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS格式JSON字符串输出EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJS格式JSON字符串输出
EN