javascript - AngularJS 格式 JSON 字符串输出

标签 javascript json string angularjs formatting

我有一个 AngularJS 应用程序,它从输入中收集数据,使用 JSON.stringify() 将模型转换为字符串并让用户以这样一种方式编辑此模型:如果 <textarea>元素被更新,反之亦然。某种双向绑定(bind):)

问题是字符串本身看起来很丑,我想把它格式化成这样:

enter image description here

现在看起来不像:

enter image description here

任何想法如何实现?如果您需要一些额外的信息 - 不要犹豫询问。每个答案都受到高度赞赏并立即得到答复。

谢谢。

附:我想这应该是某种指令或自定义过滤器。数据本身不应该改变,只有输出。

最佳答案

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

<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.toJson 方法,但我没玩过(Docs)

关于javascript - AngularJS 格式 JSON 字符串输出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22785552/

相关文章:

javascript - 页面向下滚动时调整其高度的图像

java - JSONObject 文本必须以 java 中的 1 [字符 2 第 1 行] 处的 '{' 开头

javascript - 从 AJAX 调用返回和显示数据的最佳实践

java - 如何循环遍历字符串然后查找该字符串的一部分是否在 arrayList 中

c#Discord BOT : send string with underscore (escape underscore in Visual Studio string)

java - 如何将MySql中的时间格式转换为Java中的字符串?

javascript - 为 Material.io 设置环境的资源?

javascript - 如何在 JavaScript 中解析不寻常的 JSON 文件?

javascript - 在 React 中验证电子邮件最简单、最快捷的方法是什么?

json - 使用 jq 和 awk 拆分大型 JSON 文件