在AngularJS中使用ng-jsoneditor对JSON的奇怪看法

Question

我使用ng-jsoneditor在AngularJSapplication中显示和格式化JSON数据。跟随这和这的文章。

HTML：

<div ng-jsoneditor="onLoad" 
     ng-model="vm.obj.data" 
     options="vm.obj.options" 
     style="width: 400px; height: 300px;">
</div>

联署材料：

vm.json = {
"Array": [1, 2, 3],
"Boolean": true,
"Null": null,
"Number": 123,
"Object": {
  "a": "b",
  "c": "d"
},
"String": "Hello World"
 };
vm.obj = {
    data: vm.json,
    options: {
      mode: 'tree'
    }
  };
  $scope.onLoad = function (instance) {
    instance.expandAll();
  };

输出看起来如下(坏的)：

​

​

Answer 1

您确实忘记将CSS文件包含到您的项目中。这个小提琴演示包含CSS文件。

<link rel="stylesheet" href="//cdn.rawgit.com/josdejong/jsoneditor/master/dist/jsoneditor.min.css">