Am văzut acest DECI, întrebarea.
Codul meu în loc de ng-bind="element.desc" "utilizări" {{item.desc}}
pentru că am o ng-repeat
înainte.
Deci codul meu:
<div ng-repeat="item in items">
{{item.description}}
</div>
Element descriere conține \n
pentru liniile noi care nu sunt prestate.
Cum poate {{item.descriere}}
a afișa liniile cu ușurință presupunând că am ng-repet
de mai sus?
Bazat pe @pilaf răspunsul - dar cu o îmbunătățire care chiar a acceptat răspunsul nu are.
<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;
}
Acest lucru va folosi liniile și spațiile albe ca dat, dar, de asemenea, pauză de conținut la conținutul limite. Mai multe informații despre white-space de proprietate pot fi găsite aici:
https://developer.mozilla.org/en-US/docs/Web/CSS/white-space
Dacă doriți să rupă pe linii noi, dar, de asemenea, prăbușirea mai multe spații sau spațiu alb care precede textul (foarte similar cu browser originale comportament), puteți utiliza, ca @aaki sugerat:
white-space: pre-line;
Frumos comparație între diferite moduri de redare: http://meyerweb.com/eric/css/tests/white-space.html
Încercați:
<div ng-repeat="item in items">
<pre>{{item.description}}</pre>
</div>
De <pre>
wrapper va imprima textul cu \n
ca text
de asemenea, dacă imprimați json, pentru o mai bună utilizare aspect json
filtru, cum ar fi:
<div ng-repeat="item in items">
<pre>{{item.description|json}}</pre>
</div>
[Demo][1]
Sunt de acord cu@Paul Weber", că " white-space: pre-wrap;este mai bună abordare, oricum, folosind
` - un mod rapid cea mai mare parte pentru depanare unele lucruri (dacă nu't doriți să pierdeți timp pe styling)
Cu CSS aceasta se poate realiza cu ușurință.
<div ng-repeat="item in items">
<span style="white-space:pre-wrap;"> {{item.description}}</span>
</div>
Sau o clasă CSS pot fi create pentru acest scop și poate fi folosit de fișier CSS extern
css soluție funcționează, cu toate acestea nu obține controlul asupra styling. În cazul meu, am vrut un pic mai mult spațiu după linia de pauză. Aici este o directivă-am creat ca să se ocupe de acest lucru (mașina de scris):
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);
Utilizare:
<div class="pre">{{item.description}}</div>
Tot ce face este învelit fiecare parte a textului, în pentru o `
tag. După care vă puteți aranja cum vrei tu.
Da, mi-ar folosi fie <pre>
tag-ul sau de a folosi ng-bind-html-nesigur
http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe (utilizare ng-bind-html dacă utilizați 1.2+) după utilizarea .replace () "pentru a schimba" /n
a <br />
Doar folosi css style "white-space: pre-wrap" și ar trebui să fie bun pentru a merge. Am'am avut aceeași problemă în cazul în care am nevoie să se ocupe de mesaje de eroare pentru care sfârșiturile de linie și spații albe sunt cu adevărat special. Am adăugat doar inline unde am fost obligatoriu datele și funcționează ca Farmec!
Am avut o problema asemanatoare la tine. Am'm nu dornici de pe alte răspunsuri aici pentru că ei nu't într-adevăr permite să stilul newline comportament foarte usor. Am'm nu este sigur dacă ai control asupra datelor inițiale, dar soluția nu a fost adoptat pentru a comuta "articole" de a fi o matrice de siruri de caractere pentru a fi o serie de tablouri, în care fiecare element din cea de-a doua matrice conținea o linie de text. În acest fel puteți face ceva de genul:
<div ng-repeat="item in items">
<p ng-repeat="para in item.description">
{{para}}
</p>
</div>
În acest fel, puteți aplica clase la punctele și stilul ei frumos cu CSS.
Trebuie doar să adăugați acest la stiluri, acest lucru funcționează pentru mine
white-space: pre-wrap
Prin acest text în `<textarea> poate fi afișat ca o's acolo cu spații și linia de frâne
HTML
<p class="text-style">{{product?.description}}</p>
CSS
.text-style{
white-space: pre-wrap
}