angularjs로 json 예쁜 프린트 사용

angularjs로 json 예쁜 프린트 사용

이 json pretty print [ http://jsfiddle.net/KJQ9K/ ]를 angularJS로 사용하는 방법은 무엇입니까?

myJsonValue가

{a:1, 'b':'foo', c:[false,'false',null, 'null', {d:{e:1.3e5,f:'1.3e5'}}]}

아래를 사용하여 사전 렌더링(예시와 같이)할 수 있도록 하고 싶다.

Angular는 이미json필터 내장:

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

그json담뱃대어|Angular Filter 입니다.필요에 따라서, 독자적인 커스텀 필터를 작성할 수 있습니다.

app.filter('prettyJSON', function () {
    function prettyPrintJson(json) {
      return JSON ? JSON.stringify(json, null, '  ') : 'your browser doesnt support JSON so cant pretty print';
    }
    return prettyPrintJson;
});

커스텀을 사용하려면prettyJSON필터:

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

@TeChn4K로부터의 ES6 버전:

app.filter("prettyJSON", () => json => JSON.stringify(json, null, " "))

또 다른 옵션은 기능을 필터로 변환하는 것입니다.

app.filter('prettify', function () {

    function syntaxHighlight(json) {
        // ...
    }

    return syntaxHighlight;
});

HTML...

<pre ng-bind-html="json | prettify"></pre>

JsFiddle : http://jsfiddle.net/KSTe8/

보다 심플한 코드:

app.filter('prettyJSON', function () {
    return function(json) { return angular.toJson(json, true); }
});

를 사용하는 것을 잊지 마세요.<pre>태그

몇 가지 옵션이 있습니다.제가 생각하는 가장 'Angular J'는S" 방법은 커스텀오브젝트를 Angular 서비스로 랩하는 것입니다.

myAngularModule.service('myPrettyPrintService', ,myObject );

는 이를 컨트롤러에 주입합니다.

myAngularModule.controller('myTestController', function(myPrettyPrintService){}

그런 다음 컨트롤러 내부에서 함수를 참조하여 정렬합니다.

myPrettyPrintService.syntaxHighlight();

JavaScript에 정의되어 있는 것은 모두 글로벌하기 때문에 기술적으로 컨트롤러 내에서만 액세스 할 수 있습니다.

syntaxHighlight();

컨트롤러에 대한 외부 의존관계가 추가되기 때문에 유닛 테스트에 문제가 생길 수 있습니다.

언급URL : https://stackoverflow.com/questions/22776476/use-json-pretty-print-in-angularjs