Melestarikan garis istirahat di angularjs

Berdasarkan @pilau s jawaban - tetapi dengan peningkatan yang bahkan jawaban yang diterima tidak memiliki.

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

Ini akan menggunakan baris dan spasi seperti yang diberikan, tetapi juga istirahat konten di isi batas. Informasi lebih lanjut tentang putih-ruang tamu dapat ditemukan di sini:

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

Jika anda ingin istirahat pada baris, tetapi juga runtuh beberapa ruang atau ruang putih mendahului teks (sangat mirip dengan aslinya browser perilaku), yang dapat anda gunakan, seperti @aaki yang disarankan:

white-space: pre-line;

Nice perbandingan rendering yang berbeda mode: http://meyerweb.com/eric/css/tests/white-space.html

Coba:

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

The <pre> wrapper akan mencetak teks dengan \n sebagai teks

juga jika anda mencetak json, untuk tampilan yang lebih baik menggunakan json filter, seperti:

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

Demo

Saya setuju dengan @Paul Weber yang white-space: pre-wrap; adalah pendekatan yang lebih baik, lagian menggunakan <pre> - cara cepat sebagian besar untuk debug beberapa barang (jika anda don't ingin membuang-buang waktu pada styling)

It's begitu sederhana dengan CSS (bekerja, aku bersumpah).

.angular-with-newlines {
  white-space: pre;
}

• Melihat ma! Tidak ada tambahan tag-tag HTML!

Dengan CSS ini dapat mencapai dengan mudah.

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

Atau kelas CSS dapat dibuat untuk tujuan ini dan dapat digunakan dari file CSS eksternal

Nah itu tergantung, jika anda ingin untuk mengikat data-data, tidak seharusnya't menjadi format apapun di dalamnya, jika tidak, anda dapat mengikat-html dan melakukan keterangan.replace(/\\n/g, &#39;<br>&#39;) tidak yakin itu's apa yang anda inginkan sekalipun.

css solusi bekerja, namun anda tidak benar-benar mendapatkan kontrol di styling. Dalam kasus saya saya ingin sedikit lebih banyak ruang setelah garis istirahat. Di sini adalah petunjuk yang saya buat untuk menangani hal ini (ketangkasan):

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);

Gunakan:

<div class="pre">{{item.description}}</div>

Semua hal ini adalah membungkus setiap bagian dari teks ke <p> tag. Setelah itu anda dapat gaya namun anda inginkan.

Ya, aku akan baik menggunakan <pre> tag atau menggunakan ng-mengikat-html-tidak aman http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe (gunakan ng-mengikat-html jika anda menggunakan 1.2+) setelah menggunakan .mengganti() mengubah /n menjadi <br />

Hanya menggunakan gaya css "white-space: pre-wrap" dan anda harus baik untuk pergi. I've punya masalah yang sama di mana saya perlu untuk menangani pesan error yang garis istirahat dan ruang putih yang benar-benar khusus. Saya hanya menambahkan inline ini di mana aku mengikat data dan bekerja seperti Pesona!

Aku punya masalah yang sama dengan anda. I'm tidak tertarik pada jawaban yang lain di sini karena mereka don't benar-benar memungkinkan anda untuk gaya newline perilaku sangat mudah. I'm tidak yakin jika anda memiliki kontrol atas data asli, tapi solusi saya diadopsi untuk beralih "item" dari sebuah array dari string menjadi array dari array, dimana masing-masing item dalam array kedua berisi baris teks. Dengan cara itu anda dapat melakukan sesuatu seperti:

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

Cara ini dapat anda terapkan kelas untuk paragraf dan gaya mereka dengan baik dengan CSS.

Hanya menambahkan ini untuk gaya anda, ini bekerja untuk saya

white-space: pre-wrap

Oleh teks ini di <textarea>dapat ditampilkan sebagai it's di sana dengan spasi dan garis rem

HTML

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

CSS

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