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

これは、指定されたとおりに改行と空白を使用しますが、コンテンツの境界でコンテンツを分割します。ホワイトスペースプロパティの詳細については、以下を参照してください。

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

改行で改行するだけでなく、テキストの前にある複数のスペースや空白を折りたたむ場合（元のブラウザーの動作と非常によく似ています）、@ aakiが示唆するように使用できます。

white-space: pre-line;

異なるレンダリングモードの素晴らしい比較：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ソリューションは機能しますが、スタイリングを実際に制御することはできません。私の場合、改行の後にもう少しスペースが必要でした。これを処理するために作成したディレクティブ（typescript）は次のとおりです。

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-bind-htmlを使用）を使用.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を使用してスタイルを整えることができます。