AngularJS 형식 JSON 문자열 출력
나는 Angular를 가지고 있다.입력으로부터 데이터를 수집하는 JS 애플리케이션은 모델을 문자열로 변환합니다.JSON.stringify()사용자가 이 모델을 편집하여 입력 필드가 갱신되도록 합니다.<textarea>요소가 업데이트되고 그 반대도 마찬가지입니다.일종의 쌍방향 바인딩:)
문제는 String 자체가 보기 흉하고 다음과 같이 포맷하고 싶다는 것입니다.
그리고 지금처럼 보이지는 않는다:
어떻게 이 일을 해낼 수 있는지 아십니까?추가 정보가 필요하시면 주저하지 마시고 문의해 주십시오.모든 답변에 매우 감사하며 즉시 답변해 드립니다.
감사해요.
추신: 이건 일종의 지시사항이나 커스텀 필터여야 할 것 같아요.데이터 자체는 변경하지 말고 출력만 변경해 주세요.
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)
옵션 파라미터를 사용할 수 있습니다.JSON.stringify()
JSON.stringify(value[, replacer [, space]])파라미터
- JSON 문자열로 변환할 값.
- replacer 함수의 경우 문자열화 중에 발견된 값과 속성을 변환합니다.배열일 경우 마지막 문자열의 객체에 포함된 속성 세트를 지정합니다.리페이서 함수에 대한 자세한 설명은 JavaScript 안내서 Using native JSON에 나와 있습니다.
- space 결과 문자열이 예쁘게 인쇄됩니다.
예를 들어 다음과 같습니다.
JSON.stringify({a:1,b:2,c:{d:3, e:4}},null," ")
는 다음과 같은 결과를 제공합니다.
"{
"a": 1,
"b": 2,
"c": {
"d": 3,
"e": 4
}
}"
JSON을 HTML로 렌더링하고 접어서 열 수 있는 경우 방금 작성한 지시문을 사용하여 렌더링할 수 있습니다.
https://github.com/mohsen1/json-formatter/
angular.toJson(obj, pretty);
이 기능의 두 번째 파라미터는 예쁜 인쇄를 켜고 사용할 공간 수를 설정할 수 있습니다.
true로 설정하면 JSON 출력에 줄 바꿈과 공백이 포함됩니다.정수로 설정했을 경우, JSON 출력에는 들여쓰기마다 같은 수의 공백이 포함됩니다.
(디폴트:2)
json 텍스트를 편집하는 데 사용하고 싶은가 봐요.그럼 ivarni의 방법을 사용할 수 있습니다.
{{data | json}} and add an adition attribute to make
편집 가능한
<pre contenteditable="true">{{data | json}}</pre>
이게 도움이 되길 바라.
JSON을 할 수 .ng-prettyjson지시.npm 패키지를 참조해 주세요.
은 다음과 <pre pretty-json="jsonObject"></pre>
언급URL : https://stackoverflow.com/questions/22785552/angularjs-format-json-string-output
'sourcecode' 카테고리의 다른 글
| react render()가 componentDidMount()보다 먼저 호출되고 있습니다. (0) | 2023.03.04 |
|---|---|
| React.js에서 리치 데이터 구조 편집 (0) | 2023.03.04 |
| 해석된 JSON에 PowerShell을 추가하는 방법 (0) | 2023.03.04 |
| JSON 개체에서 __type 속성을 직렬화하지 않는 방법 (0) | 2023.03.04 |
| 요소의 각 ng-반복 조건부 랩 항목(ng-반복 그룹 항목) (0) | 2023.03.04 |