2017-05-17 9 views
3

AngularJSapplicationでJSONデータを表示および書式設定するためにng-jsoneditorを使用しています。 thisおよびthisの記事に続きます。AngularJSでng-jsoneditorを使用したJSONの奇妙なビュー

HTML:

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

JS:

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

出力は次のようになります(壊れた):

enter image description here

+0

私の答えはあなたのために働くのですか? – lin

+1

よろしくお願いします。出来た。 –

答えて

1

は、あなたがにCSSファイルを含めることを忘れなかったあなたプロジェクト。このfiddle demoにはCSSファイルが含まれています。

<link rel="stylesheet" href="//cdn.rawgit.com/josdejong/jsoneditor/master/dist/jsoneditor.min.css"> 
関連する問題