새 선이 있는 AngularJS 문자열, 중단 없이 표시됩니다.

새 선이 있는 AngularJS 문자열, 중단 없이 표시됩니다.

데이터베이스에 텍스트 영역의 입력을 저장하고 있습니다. 여기서 휴식 시간을 추가할 수 있습니다.하지만 어떻게 앵귤러 뷰에서 그것들을 보여줄 수 있을까요?PHP의 경우 이는nl2br().

맘에 들다<div>{{ item.foobar }}</div>이렇게 데이터베이스에 저장되어 있는 브레이크가 표시됩니다.

HTML을 바인딩하는 것은 안전하지 않은 것 같습니다.Curious가 제안하는 지시문가이는 HTML을 올바르게 탈출하기 위해 약간의 추가 엔지니어링을 가지고 있다.

스타일링 규칙을 사용하는 것이 더 쉽다는 것을 알게 되었습니다.white-space: pre-line.

JSFiddle의 예.

다음 항목도 참조하십시오.

• Mozilla Developer Network 매뉴얼:white-space
• Internet Explorer 매뉴얼white-space
• W3 매뉴얼:white-space

최적의 솔루션:

<div class="multi_lines_text">{{ item.foobar }}</div>

<style>
.multi_lines_text { white-space: pre-line; }
</style>

ng-syslog-syslog - 안전하지 않은 방법으로 콘솔에 오류가 표시됩니다.

줄 바꿈만 추가하고 나머지 텍스트를 모두 그대로 표시하려면 다음 필터를 사용합니다.

app.filter('nl2br', function() {
    var span = document.createElement('span');
    return function(input) {
        if (!input) return input;
        var lines = input.split('\n');

        for (var i = 0; i < lines.length; i++) {
            span.innerText = lines[i];
            span.textContent = lines[i];  //for Firefox
            lines[i] = span.innerHTML;
        }
        return lines.join('<br />');
    }
});

그런 다음 다음과 같이 사용합니다.

<div ng-bind-html="someVar | nl2br"></div>

이 경우 결과 문자열에 존재하는HTML 태그는 다음과 같습니다.<br />. 다른 모든 태그는 이스케이프됩니다.
로딩하는 것도 잊지 말고ngSanitize모듈 ( )angular-sanitize.js스크립트)를 참조해 주세요.

jsFiddle에서 찾을 수 있는 완전한 작업 예제입니다.

googling angularjs nl2br은 다음과 같은 결과를 얻었습니다.

AngularJS - 데이터에서 \n 삭제

즉, 새로운 회선을 교체하는 방법을 나타내는 마지막 답변입니다.<br />필터를 사용합니다.안전하지 않은 버전을 현재 사용할 수 없을 수 있으므로 이 버전을 ng-bind-html과 결합합니다.줄 바꿈을 다음과 같이 변환해야 합니다.<br />데이터베이스에 삽입할 때 사용합니다(제게는 좀 더 의미가 있습니다).

언급URL : https://stackoverflow.com/questions/21813857/angularjs-string-with-newlines-shown-without-breaks