在angularjs中使用JSON漂亮的打印

我怎样才能使用这json漂亮的打印[ http://jsfiddle.net/KJQ9K/ ]与angularJS？

让我们假设myJsonValue是

{a:1, 'b':'foo', c:[false,'false',null, 'null', {d:{e:1.3e5,f:'1.3e5'}}]} 

我希望能够在下面使用渲染前（如示例中所示）

Answer 1

Angular已经内置了jsonfilter：

 <pre> {{data | json}} </pre> 

pipe道之后的json | 是一个angular度filter 。 如果你喜欢，你可以自己定制filter ：

 app.filter('prettyJSON', function () { function prettyPrintJson(json) { return JSON ? JSON.stringify(json, null, ' ') : 'your browser doesnt support JSON so cant pretty print'; } return prettyPrintJson; }); 

要使用您的自定义prettyJSONfilter：

  <pre> {{data | prettyJSON}} </pre> 

来自@ TeChn4K的ES6版本：

 app.filter("prettyJSON", () => json => JSON.stringify(json, null, " ")) 

Answer 2

另一个select是把function变成一个filter…

 app.filter('prettify', function () { function syntaxHighlight(json) { // ... } return syntaxHighlight; }); 

HTML …

 <pre ng-bind-html="json | prettify"></pre> 

JsFiddle： http : //jsfiddle.net/KSTe8/

Answer 3

简单的代码：

 app.filter('prettyJSON', function () { return function(json) { return angular.toJson(json, true); } }); 

请记住使用te <pre>标签

Answer 4

你有几个select。 我认为最“AngularJS”的方式是把你的自定义对象包装成一个Angular服务：

 myAngularModule.service('myPrettyPrintService', ,myObject ); 

注入到控制器中：

 myAngularModule.controller('myTestController', function(myPrettyPrintService){} 

然后在控制器内部参考function和sorting：

 myPrettyPrintService.syntaxHighlight(); 

由于JavaScript中定义的任何东西都是全局的，所以你可以在技术上在控制器内部访问它：

 syntaxHighlight(); 

这可能会搞砸单元testingt，因为它会添加一个外部的，未定义的，依赖于你的控制器。