angularjs - AngularJS パーシャルで新しい行を保持するにはどうすればよいですか?

Question

AngularJS パーシャル内で、次のようにエントリのリストをループしています。

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

のコンテンツに{{entry.content}}は、AngularJS によって無視されるいくつかの改行があります。改行を保持するにはどうすればよいですか?

Answer 1

これは単なる基本的なHTMLです。AngularJSはそれについて何も変更しません。pre代わりにタグを使用できます。

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

またはCSSを使用します。

p .content {white-space: pre}

...

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

HTMLコードが含まれている場合entry.contentは、次を使用できますng-bind-html。

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

ngSanitizeを含めることを忘れないでください：

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

Answer 2

フィルターを作っています

// 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>

Answer 3

// 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>