web-dev-qa-db-ja.com

Angularjsの改行を保存する

私は this SO質問を見ました。

私は以前にng-bind="item.desc"を持っているので、{{item.desc}}の代わりに私のコードはng-repeatを使います。

だから私のコード：

<div ng-repeat="item in items">
  {{item.description}}
</div>

項目の説明には、レンダリングされない改行の\nが含まれています。

上記の{{item.description}}があると仮定した場合、ng-repeatはどのようにして簡単に改行を表示できますか？

angularjsangularjs-ng-repeat
163
Diolor

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

これは与えられたように改行と空白を使用しますが、コンテンツ境界でコンテンツを分割します。 white-spaceプロパティの詳細については、こちらを参照してください。

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

254
Paul Weber

試してください：

<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> - デバッグのための主な手っ取り早い方法（スタイルの時間を無駄にしたくない場合）

126
Maxim Shoustin

CSSではとても簡単です（うまくいきます、私は誓います）。

.angular-with-newlines {
  white-space: pre;
}
  • まあ見て！追加のHTMLタグはありません。
62
pilau

CSSを使えば、これは簡単に達成できます。

<div ng-repeat="item in items">
<span style="white-space:pre-wrap;"> {{item.description}}</span>
</div>

あるいは、CSSクラスをこの目的のために作成して、外部CSSファイルから使用することもできます。

15
Rehan

データをバインドしたいのであれば、フォーマットを設定しないでください。そうしないと、bind-htmlを実行してdescription.replace(/\\n/g, '<br>')を実行して、それが希望どおりかどうかわからなくなります。

2
Nicolas Brugneaux

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>タグにラップするだけです。その後、あなたはそれをあなたが望むけれどもそれをスタイルすることができます。

1
Dmitry

CSSスタイルの "white-space：pre-wrap"を使うだけでいいでしょう。私は同じ問題を抱えていました。エラーメッセージを処理する必要があり、そこでは改行があり、空白が本当に特殊です。データをバインドしていた場所にこのインラインを追加したところ、Charmのように機能します。

0
Siddhartha Thota

はい、<pre>タグを使用するか、ng-bind-html-unsafehttp://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe （次の場合はng-bind-htmlを使用） .replace()を使用して/nを<br />に変更した後、1.2+を使用している

0
NicolasMoise

私はあなたと同じような問題を抱えていました。私は他の答えにそれほど熱心ではありません。なぜならそれらはあなたが改行の振る舞いを非常に簡単にスタイルすることを本当に許さないからです。元のデータを制御できるかどうかはわかりませんが、私が採用した解決策は、「項目」を文字列の配列から配列の配列に切り替えることです。2番目の配列の各項目には1行のテキストが含まれます。 。そうすれば、次のようなことができます。

<div ng-repeat="item in items">
  <p ng-repeat="para in item.description">
     {{para}}
  </p>
</div>

このようにして、段落にクラスを適用したり、CSSを使用してそれらをうまくスタイル設定したりできます。

0
Chris Rae

これをあなたのスタイルに加えるだけで、これは私のために働きます

white-space: pre-wrap

<textarea>内のこのテキストは、スペースとラインブレーキで表示されているとおりに表示できます。

HTML

   <p class="text-style">{{product?.description}}</p>

CSS

.text-style{
    white-space: pre-wrap
}
0
Akitha_MJ