Saya telah melihat ini JADI pertanyaan.
Kode saya bukan ng-bind="item.desc"
menggunakan {{item.desc}}
karena aku punya ng-repeat
sebelumnya.
Jadi kode saya:
<div ng-repeat="item in items">
{{item.description}}
</div>
Deskripsi item berisi \n
untuk baris yang tidak diberikan.
Bagaimana bisa {{item.keterangan}}
menampilkan baris baru dengan mudah dengan asumsi bahwa saya memiliki ng-repeat
di atas?
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][1]
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)
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, '<br>')
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
}