Question

我有一个AngularJS应用程序，它从输入中收集数据，使用JSON.stringify()将模型转换为字符串，并允许用户编辑此模型，以便在<textarea>时更新输入字段元素更新，反之亦然。某种双向绑定：）

问题是String本身看起来很难看，我想格式化它，所以它看起来像这样：

enter image description here

现在不喜欢它了：

enter image description here

有关如何实现这一目标的任何想法？如果您需要一些额外的信息 - 请不要犹豫。每个答案都受到高度赞赏并立即回答。

谢谢。

P.S。我想这应该是某种指令或自定义过滤器。数据本身不应该被改变，只有输出。

Answer 1

Angular有一个内置的filter用于展示JSON

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

请注意使用pre - 标记来保存空格和换行符

演示：

＆＃13;

angular.module('app', [])
  .controller('Ctrl', ['$scope',
    function($scope) {

      $scope.data = {
        a: 1,
        b: 2,
        c: {
          d: "3"
        },
      };

    }
  ]);

＆＃13;

<!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>

＆＃13;

还有angular.toJson方法，但我还没有玩过（Docs）

Answer 2

您可以使用JSON.stringify()

的可选参数

JSON.stringify(value[, replacer [, space]])

<强>参数


value 要转换为JSON字符串的值。

替换者如果是一个功能，   转换字符串化时遇到的值和属性;如果   array，指定包含在对象中的属性集   最后一串。替换器功能的详细说明是   javaScript指南文章中提供了使用本机JSON。

空间   导致生成的字符串打印得很漂亮。

例如：

JSON.stringify({a:1,b:2,c:{d:3, e:4}},null,"    ")

会给你以下结果：

"{
    "a": 1,
    "b": 2,
    "c": {
        "d": 3,
        "e": 4
    }
}"

Answer 3

如果您希望将JSON渲染为HTML并且可以折叠/打开它，您可以使用我刚刚制作的这个指令来很好地渲染它：

https://github.com/mohsen1/json-formatter/

enter image description here

Answer 4

除了已提到的angular json filter之外，还有angular toJson() function。

angular.toJson(obj, pretty);

此功能的第二个参数允许您打开漂亮的打印并设置要使用的空格数。

如果设置为true，则JSON输出将包含换行符和空格。如果设置为整数，则JSON输出将包含每个缩进的许多空格。

（默认：2）

Answer 5

我想你想用来编辑json文本。然后你可以使用ivarni的方式：

{{data | json}}

并添加adition属性以生成

 editable

<pre contenteditable="true">{{data | json}}</pre>

希望这可以帮到你。

Answer 6

如果要格式化JSON并进行语法突出显示，可以使用ng-prettyjson指令。 See the npm package.

以下是如何使用它：<pre pretty-json="jsonObject"></pre>

AngularJS格式JSON字符串输出

6 个答案: