Preserva le interruzioni di riga in angularjs

Ho visto questa domanda SO.

Il mio codice invece di ng-bind="item.desc"usa {{item.desc}}perché ho un ng-repeatprima.

Quindi il mio codice:

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

La descrizione dell'elemento contiene \nper le nuove righe che non vengono visualizzate.

Come può {{item.description}}visualizzare le newline facilmente supponendo che io abbia quanto ng-repeatsopra?

Basato sulla risposta di @pilau - ma con un miglioramento che nemmeno la risposta accettata ha.

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

Ciò utilizzerà le nuove righe e gli spazi bianchi come indicato, ma interromperà anche il contenuto ai limiti del contenuto. Ulteriori informazioni sulla proprietà degli spazi bianchi sono disponibili qui:

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

Se vuoi interrompere le nuove righe, ma anche comprimere più spazi o spazi bianchi che precedono il testo (molto simile al comportamento del browser originale), puoi utilizzare, come suggerito da @aaki:

white-space: pre-line;

Bel confronto tra le diverse modalità di rendering: http://meyerweb.com/eric/css/tests/white-space.html

Provare:

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

Il <pre>wrapper stamperà il testo \ncome testo

anche se si stampa il json, per un aspetto migliore utilizzare il jsonfiltro, come:

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

Demo

Sono d'accordo con @Paul Weberquesto white-space: pre-wrap;è un approccio migliore, comunque usando <pre>- il modo rapido principalmente per il debug di alcune cose (se non vuoi perdere tempo con lo styling)

È così semplice con CSS (funziona, lo giuro).

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

• Guarda mamma! Nessun tag HTML aggiuntivo!

Con CSS questo può essere raggiunto facilmente.

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

Oppure una classe CSS può essere creata a questo scopo e può essere utilizzata da un file CSS esterno

Beh, dipende, se vuoi associare i dati, non dovrebbe esserci alcuna formattazione, altrimenti puoi bind-htmle non sei description.replace(/\\n/g, '<br>') sicuro che sia quello che vuoi però.

la soluzione CSS funziona, tuttavia non si ottiene davvero il controllo sullo stile. Nel mio caso volevo un po 'più di spazio dopo l'interruzione di linea. Ecco una direttiva che ho creato per gestire questo (dattiloscritto):

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

Uso:

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

Tutto ciò che fa è avvolgere ogni parte del testo in un <p>tag. Dopodiché puoi modellarlo come preferisci.

Aggiungilo ai tuoi stili, questo funziona per me

white-space: pre-wrap

Con questo testo in <textarea>può essere visualizzato in quanto è lì con spazi e freni di linea

HTML

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

CSS

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

Sì, utilizzare il <pre>tag o utilizzare ng-bind-html-unsafe http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe (utilizzare ng-bind-html se si utilizza 1.2+) dopo aver utilizzato .replace()per cambia /nin<br />

Usa semplicemente lo stile CSS "white-space: pre-wrap" e dovresti essere pronto. Ho avuto lo stesso problema in cui ho bisogno di gestire i messaggi di errore per i quali le interruzioni di riga e gli spazi bianchi sono davvero particolari. Ho appena aggiunto questo inline dove stavo vincolando i dati e funziona come Charm!

Ho avuto un problema simile a te. Non sono così appassionato delle altre risposte qui perché non ti permettono davvero di modellare il comportamento newline molto facilmente. Non sono sicuro che tu abbia il controllo sui dati originali, ma la soluzione che ho adottato è stata quella di passare da "elementi" da array di stringhe a array di array, in cui ogni elemento nel secondo array conteneva una riga di testo . In questo modo puoi fare qualcosa come:

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

In questo modo puoi applicare le classi ai paragrafi e modellarle in modo gradevole con i CSS.