Question

如何将此json pretty print [http://jsfiddle.net/KJQ9K/]与angularJS一起使用？

让我们假设myJsonValue是

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

我希望能够使用下面的内容来渲染pre（如示例所示）

Answer 1

Angular已经有json过滤器built-in：

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

管道json之后的|是Angular Filter。如果您愿意，可以自己制作custom 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;
});

使用自定义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

您有几个选择。我认为最多＆＃34; AngularJS＆＃34;方法是将自定义对象包装到Angular服务中：

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

将其注入控制器：

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

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

myPrettyPrintService.syntaxHighlight();

因为在JavaScript中定义的任何东西都是全局的，所以你在技术上只能在控制器中访问它：

syntaxHighlight();

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

在angularjs中使用json pretty print

4 个答案: