在angularjs中使用json pretty print

Question

我如何在angularJS中使用这个json pretty print [ http://jsfiddle.net/KJQ9K/ ]？

让我们假设myJsonValue是

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

我希望能够使用下面的渲染预(如示例所示)

Answer 1

Angular已经内置了json过滤器:

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

该json管道之后|是角度滤波器.如果您愿意,可以制作自己的自定义过滤器:

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

要使用自定义prettyJSON过滤器:

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

来自@TeChn4K的ES6版本:

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

Answer 2

另一个选择是将功能转换为过滤器...

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); }
});

记得使用<pre>标签

Answer 4

你有几个选择。我认为最“AngularJS”的方法是将自定义对象包装到 Angular 服务中：

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

将其注入控制器：

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

然后在控制器内部，引用函数并排序：

myPrettyPrintService.syntaxHighlight();

由于 JavaScript 中定义的任何内容都是全局的，从技术上讲，您可以在控制器内访问它：

syntaxHighlight();

这可能会搞砸单元测试，因为它向控制器添加了外部的、未定义的依赖项。