반응형
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.content
HTML 코드가 포함되어 있습니다.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
반응형
'programing' 카테고리의 다른 글
redex 비동기 액션에 callBacks를 전달하는 것이 좋은 프랙티스로 간주됩니까? (0) | 2023.02.25 |
---|---|
Spring을 사용하여 속성 파일에 프로그래밍 방식으로 액세스하시겠습니까? (0) | 2023.02.25 |
플러그인 업로드 중 업로드된 파일이 php.ini 오류의 upload_max_filesize 지시문을 초과합니다. (0) | 2023.02.25 |
워드프레스는 표준 루프를 통해 투고 순서를 변경합니다. (0) | 2023.02.25 |
MVC ajax json을 컨트롤러에 게시하는 액션 메서드 (0) | 2023.02.25 |