programing

Angular에서 새 선을 보존하려면 어떻게 해야 합니까?JS 부분?

abcjava 2023. 2. 25. 19:29
반응형

Angular에서 새 선을 보존하려면 어떻게 해야 합니까?JS 부분?

각도 내JS 부분 다음과 같이 엔트리 목록을 루프합니다.

<ul class="entries">
    <li ng-repeat="entry in entries">
        <strong>{{ entry.title }}</strong>
        <p>{{ entry.content }}</p>
    </li>
</ul>

의 내용{{entry.content}}AngularJS에 의해 무시되는 라인브레이크가 몇 개 있어요어떻게 하면 라인브레이크를 유지할 수 있을까요?

기본적인 HTML일 뿐입니다. 각진 각진 각진 각진 각진 각진 각진 각선JS는 아무것도 바꾸지 않을 거예요.를 사용할 수 있습니다.pre대신 태그 지정:

<pre>{{ entry.content }}</pre>

또는 CSS를 사용합니다.

p .content {white-space: pre}

...

<p class='content'>{{ entry.content }}</p>

한다면entry.contentHTML 코드가 포함되어 있습니다.ng-bind-html:

<p ng-bind-html="entry.content"></p>

ngSanitize를 잊지 마십시오.

var myModule = angular.module('myModule', ['ngSanitize']);

나는 필터를 만든다.

// filters js
myApp.filter("nl2br", function($filter) {
 return function(data) {
   if (!data) return data;
   return data.replace(/\n\r?/g, '<br />');
 };
});

그리고나서

// view
<div ng-bind-html="article.description | nl2br"></div>

나는 그것을 추가함으로써 고친다.pre-line:

<style>
    pre{
        white-space: pre-line;
    }
</style>
My data:
 <pre>{{feedback.Content}}<pre>
// AngularJS filter
angular.module('app').filter('newline', function($sce) {
    return function(text) {
        text = text.replace(/\n/g, '<br />');
        return $sce.trustAsHtml(text);
    }
});

// HTML
<span ng-bind-html="someText | newline"></span>

언급URL : https://stackoverflow.com/questions/15449325/how-can-i-preserve-new-lines-in-an-angularjs-partial

반응형