AngularJS格式的JSONstring输出
我有AngularJS应用程序，它从input中收集数据，使用JSON.stringify()将模型转换为string，并让用户编辑此模型，以便在更新<textarea>元素时更新input字段，反之亦然。 某种双向绑定:)
问题是，string本身看起来很丑，我想格式化它看起来像这样：
现在看起来不像它：
任何想法如何可以实现？ 如果你需要一些额外的信息 – 不要犹豫，问。 每一个答案都高度赞赏和立即回答。
谢谢。
PS我想这应该是某种指令或自定义filter。 数据本身不应该被改变，只有输出。
您可以使用JSON.stringify()的可选参数
JSON.stringify(value[, replacer [, space]])参数
- value要转换为JSONstring的值。
- replace者如果一个函数转换了string化时遇到的值和属性， 如果是数组，则指定包含在最终string中的对象中的一组属性。 在javaScript指南文章中使用本地JSON提供了替代函数的详细说明。
- 空间导致生成的string被打印出来。
例如：
JSON.stringify({a:1,b:2,c:{d:3, e:4}},null," ")
会给你以下结果：
"{ "a": 1, "b": 2, "c": { "d": 3, "e": 4 } }"
Angular有一个用于显示JSON的内置filter
<pre>{{data | json}}</pre>
请注意使用pre标签来节省空白和换行符
演示：
angular.module('app', []) .controller('Ctrl', ['$scope', function($scope) { $scope.data = { a: 1, b: 2, c: { d: "3" }, }; } ]);
<!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 | json}}</pre> </body> </html>
除了已经提到的angular度json滤波器之外 ，还有angular度toJson()函数 。
angular.toJson(obj, pretty);
这个函数的第二个参数可以让你打开漂亮的打印并设置要使用的空格的数量。
如果设置为true，则JSON输出将包含换行符和空格。 如果设置为整数，则JSON输出将包含每个缩进多less个空格。
（默认：2）
如果你想格式化JSON并且做一些语法高亮，你可以使用ng-prettyjson指令。 见npm包。
这里是如何使用它： <pre pretty-json="jsonObject"></pre>
我想你想用来编辑json文本。 那么你可以使用ivarni的方式：
{{data | JSON}}
并添加一个adition属性来制作
编辑
<pre contenteditable="true">{{data | json}}</pre>
希望这可以帮到你。
