在AngularJS中格式化JSON对象输出

Question

我有AngularJS网络应用程序，它能够向Restful WS发送不同的http方法。每个请求都有一个预览，其中列出了所有属性，并且可以在适当的位置进行更改。除了用于输入JSON的格式化之外，一切正常。它看起来像这样：

我希望它看起来像这样，除了JSON文本显示如图1所示：

很快，我需要左侧像1皮卡一样，右侧 - 就像第二张图片一样。

这是一段代码，负责为JSON生成输入：

<div ng-show="field.restResourceName != null">
    <p ng-show={{field.isRequired}}>{{field.name}}*: </p>
    <p ng-show={{!field.isRequired}}>{{field.name}}: </p>
    <accordion id="entityField" close-others="oneAtATime">
        <accordion-group heading={{field.name}} is-open="false">
            <p>JSON:</p>
            <textarea ng-change="getCreateEntityAsText()" ng-model="createEntityResource[field.name]"></textarea>
        </accordion-group>
    </accordion>
</div>

这是负责显示输出的那个：

<div class="preview">
    <p>Preview: </p>
    <textarea class="form-control" ng-model="createEntityTextAreaModel"></textarea>
</div>

AngularJS控制器函数，它将JSON解析为模型，反之亦然：

//CREATE ENTITY JSON PARSE


$scope.getCreateEntityAsText = function () {
    $scope.createEntityTextAreaModel = JSON.stringify($scope.createEntityResource, null, "    ");
};

$scope.$watch('createEntityTextAreaModel', function () {
    applyParseValues($scope.createEntityTextAreaModel, $scope.createEntityResource);
});

applyParseValues = function(textAreaModel, entityModel){
    if($rootScope.isNotEmptyString(textAreaModel)) {
       angular.copy(JSON.parse(textAreaModel), entityModel);
    } else {
        angular.copy({}, entityModel);
    }
}

有关如何实现这一目标的任何想法？每个有用的答案都受到高度赞赏和评价。

谢谢。

Answer 1

看起来你主要有一个样式问题，这个问题在这个问题中得到解决：

JSON formatter lib

否则，Angular会附带一个内置的filter for JSON，可以在这样的视图中使用：

<p>{{someObject | json }}</p>

链接：

https://docs.angularjs.org/api/ng/filter/json https://docs.angularjs.org/api/ng/filter/json