angularjs로 줄 바꿈 유지

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-line;
}

이렇게 하면 줄 바꿈과 공백이 사용되지만 내용 경계에서도 내용이 구분됩니다.공백 속성에 대한 자세한 내용은 다음을 참조하십시오.

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

줄 바꿈을 구분하고 텍스트 앞에 있는 여러 공백이나 공백을 줄 바꿈하지 않으려면(코드 렌더링 등) 다음을 사용할 수 있습니다.

white-space: pre-wrap;

다양한 렌더링 모드 비교: 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 솔루션은 동작하지만 스타일을 제어할 수 없습니다.저 같은 경우에는 줄이 끊어진 후에 좀 더 공간이 필요했어요.이 (타자기본)을 처리하기 위해 작성한 지시문은 다음과 같습니다.

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 (1.2+를 사용하는 경우 ng-syslog-syslog 사용).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로 멋있게 스타일링할 수 있습니다.

언급URL : https://stackoverflow.com/questions/19684708/preserve-line-breaks-in-angularjs