angularjs에서 줄 바꿈 유지

나는 이 SO 질문 을 보았습니다 .

이전 버전 이 있기 때문에 코드 대신 ng-bind="item.desc"사용합니다 .{{item.desc}}ng-repeat

그래서 내 코드 :

<div ng-repeat="item in items">
  {{item.description}}
</div>

항목 설명 \n에 줄 바꿈이 포함되어 있지 않습니다.

위 {{item.description}}의 ng-repeat내용 이 있다고 가정하면 개행을 쉽게 표시 할 수 있습니까?

@pilau의 답변을 기반으로하지만 허용 된 답변조차도 개선하지 못했습니다.

<div class="angular-with-newlines" ng-repeat="item in items">
   {{item.description}}
</div>

/* in the css file or in a style block */
.angular-with-newlines {
    white-space: pre-wrap;
}

주어진 줄 바꿈과 공백을 사용하지만 내용 경계에서 내용을 끊습니다. 공백 속성에 대한 자세한 내용은 다음을 참조하십시오.

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

줄 바꿈을하고 싶지만 텍스트보다 앞의 여러 공백이나 공백을 축소하려면 (원래 브라우저 동작과 매우 유사) @aaki가 제안한대로 사용할 수 있습니다.

white-space: pre-line;

다양한 렌더링 모드를 잘 비교 한 것 : http://meyerweb.com/eric/css/tests/white-space.html

시험:

<div ng-repeat="item in items">
  <pre>{{item.description}}</pre>
</div>

<pre>래퍼로 텍스트를 인쇄 할 \n텍스트로

또한 json을 인쇄하면 더 나은 모양을 위해 다음 json과 같은 필터를 사용하십시오 .

<div ng-repeat="item in items">
  <pre>{{item.description|json}}</pre>
</div>

Demo

어쨌든 사용 @Paul Weber하는 white-space: pre-wrap;것이 더 나은 방법 이라는 데 동의합니다 <pre>. 스타일을 익히는 데 시간을 낭비하고 싶지 않은 경우 주로 일부 항목을 디버깅하는 빠른 방법

CSS로 너무 간단합니다 (작동합니다, 맹세합니다).

.angular-with-newlines {
  white-space: pre;
}

• 엄마 봐요! 추가 HTML 태그가 없습니다!

CSS를 사용하면 쉽게 달성 할 수 있습니다.

<div ng-repeat="item in items">
<span style="white-space:pre-wrap;"> {{item.description}}</span>
</div>  

또는 이러한 목적으로 CSS 클래스를 작성하고 외부 CSS 파일에서 사용할 수 있습니다.

글쎄, 그것은 당신이 데이터를 묶고 싶다면, 그 안에 어떤 형식도 없어야합니다. 그렇지 않으면 원하는 것이 무엇인지 확실 bind-html하지 description.replace(/\\n/g, '<br>')않을 수 있습니다 .

CSS 솔루션은 작동하지만 스타일을 실제로 제어 할 수는 없습니다. 필자의 경우 줄 바꿈 후에 약간 더 많은 공간을 원했습니다. 다음은 이것을 처리하기 위해 만든 지시문입니다 (typescript).

function preDirective(): angular.IDirective {
    return {
        restrict: 'C',
        priority: 450,
        link: (scope, el, attr, ctrl) => {
            scope.$watch(
                () => el[0].innerHTML,
                (newVal) => {
                    let lineBreakIndex = newVal.indexOf('\n');
                    if (lineBreakIndex > -1 && lineBreakIndex !== newVal.length - 1 && newVal.substr(lineBreakIndex + 1, 4) != '</p>') {
                        let newHtml = `<p>${replaceAll(el[0].innerHTML, '\n\n', '\n').split('\n').join('</p><p>')}</p>`;
                        el[0].innerHTML = newHtml;
                    }
                }
            )
        }
    };

    function replaceAll(str, find, replace) {
        return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
    }

    function escapeRegExp(str) {
        return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
    }
}

angular.module('app').directive('pre', preDirective);

사용하다:

<div class="pre">{{item.description}}</div>

텍스트의 각 부분을 <p>태그 로 감싸기 만하면됩니다 . 그런 다음 원하는 스타일을 지정할 수 있습니다.

이 스타일을 스타일에 추가하면 효과가 있습니다.

white-space: pre-wrap

이 텍스트를 사용 <textarea>하면 공백과 라인 브레이크가있는 것처럼 표시 할 수 있습니다

HTML

   <p class="text-style">{{product?.description}}</p>

CSS

.text-style{
    white-space: pre-wrap
}

예,이 중 하나를 사용하는 것이 <pre>태그를 사용하거나 ng-bind-html-unsafe http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe을 사용 후 (사용 겨 바인드 - HTML은 1.2+를 사용하는 경우) .replace()에 변화 /n에<br />

CSS 스타일 "white-space : pre-wrap"을 사용하면 좋을 것입니다. 줄 바꿈과 공백이 실제로 특별한 오류 메시지를 처리 ​​해야하는 것과 동일한 문제가 있습니다. 방금 데이터를 바인딩하는이 인라인을 추가했으며 매력처럼 작동합니다!

나는 너에게 비슷한 문제가 있었다. 나는 다른 답변에 열중하지 않습니다. 왜냐하면 개행 동작을 매우 쉽게 스타일 지정할 수 없기 때문입니다. 원래 데이터를 제어 할 수 있는지 확실하지 않지만 채택 한 솔루션은 "항목"을 문자열 배열에서 배열 배열로 전환하는 것이 었습니다. 두 번째 배열의 각 항목에는 텍스트 줄이 포함됩니다 . 그렇게하면 다음과 같은 것을 할 수 있습니다 :

<div ng-repeat="item in items">
  <p ng-repeat="para in item.description">
     {{para}}
  </p>
</div>

이런 식으로 단락에 클래스를 적용하고 CSS로 멋지게 스타일을 지정할 수 있습니다.