Pertahankan jeda baris dalam angularjs

Saya telah melihat pertanyaan SO ini .

Kode saya alih-alih ng-bind="item.desc"menggunakan {{item.desc}}karena saya punya ng-repeatsebelumnya.

Jadi kode saya:

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

Deskripsi item berisi \nbaris baru yang tidak dirender.

Bagaimana cara {{item.description}}menampilkan baris baru dengan mudah dengan asumsi saya memiliki di ng-repeatatas?

Berdasarkan jawaban @pilau - 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 baru dan spasi putih seperti yang diberikan, tetapi juga memecah konten di batas konten. Informasi lebih lanjut tentang properti white-space dapat ditemukan di sini:

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

Jika Anda ingin memecah baris baru, tetapi juga menciutkan banyak spasi atau ruang putih sebelum teks (sangat mirip dengan perilaku browser asli), Anda dapat menggunakan, seperti yang disarankan @aaki:

white-space: pre-line;

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

Mencoba:

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

The <pre>wrapper akan mencetak teks dengan \nsebagai teks

juga jika Anda mencetak json, agar lebih baik gunakan jsonfilter, seperti:

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

Demo

Saya setuju dengan @Paul Weberitu white-space: pre-wrap;adalah pendekatan yang lebih baik, bagaimanapun menggunakan <pre>- cara cepat sebagian besar untuk men-debug beberapa hal (jika Anda tidak ingin membuang waktu untuk styling)

Ini sangat sederhana dengan CSS (berfungsi, saya bersumpah).

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

• Lihat bu! Tidak ada tag HTML tambahan!

Dengan CSS ini dapat dicapai 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

Yah itu tergantung, jika Anda ingin mengikat data, seharusnya tidak ada format di dalamnya, jika tidak Anda bisa bind-htmldan description.replace(/\\n/g, '<br>') tidak yakin itu yang Anda inginkan.

solusi css bekerja, namun Anda tidak benar-benar mendapatkan kontrol pada penataan. Dalam kasus saya, saya ingin sedikit lebih banyak ruang setelah jeda baris. Berikut adalah arahan yang saya buat untuk menangani ini (naskah):

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

Menggunakan:

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

Yang dilakukannya hanyalah membungkus setiap bagian teks menjadi sebuah <p>tag. Setelah itu Anda bisa menatanya sesuka Anda.

Cukup tambahkan ini ke gaya Anda, ini bekerja untuk saya

white-space: pre-wrap

Dengan teks ini <textarea>dapat ditampilkan karena ada di sana dengan spasi dan rem garis

HTML

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

CSS

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

Ya, saya akan menggunakan <pre>tag atau menggunakan ng-bind-html-unsafe http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe (gunakan ng-bind-html jika Anda menggunakan 1.2+) setelah menggunakan .replace()untuk ubah /nke<br />

Cukup gunakan gaya css "white-space: pre-wrap" dan Anda harus siap. Saya pernah mengalami masalah yang sama di mana saya perlu menangani pesan kesalahan yang garis putus dan spasi putih benar-benar khusus. Saya baru saja menambahkan inline ini di mana saya mengikat data dan berfungsi seperti Charm!

Saya punya masalah yang sama dengan Anda. Saya tidak terlalu tertarik pada jawaban lain di sini karena mereka tidak benar-benar memungkinkan Anda untuk merancang perilaku baris baru dengan sangat mudah. Saya tidak yakin apakah Anda memiliki kontrol atas data asli, tetapi solusi yang saya adopsi adalah untuk beralih "item" dari menjadi array string menjadi array array, di mana setiap item dalam array kedua berisi baris teks . Dengan begitu Anda dapat melakukan sesuatu seperti:

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

Dengan cara ini Anda bisa menerapkan kelas pada paragraf dan menatanya dengan CSS.