Preservar saltos de línea en angularjs

He visto esta pregunta SO.

Mi código en lugar de ng-bind="item.desc"usos {{item.desc}}porque tengo un ng-repeatantes.

Entonces mi código:

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

La descripción del artículo contiene \nlíneas nuevas que no se representan.

¿Cómo puede {{item.description}}mostrar las nuevas líneas fácilmente suponiendo que tengo lo ng-repeatanterior?

Basado en la respuesta de @pilau, pero con una mejora que incluso la respuesta aceptada no tiene.

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

Esto usará nuevas líneas y espacios en blanco como se indica, pero también dividirá el contenido en los límites del contenido. Puede encontrar más información sobre la propiedad de espacios en blanco aquí:

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

Si desea romper en las nuevas líneas, pero también colapsar múltiples espacios o espacios en blanco anteriores al texto (muy similar al comportamiento original del navegador), puede usar, como sugirió @aaki:

white-space: pre-line;

Buena comparación de los diferentes modos de representación: http://meyerweb.com/eric/css/tests/white-space.html

Tratar:

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

El <pre>contenedor imprimirá el texto \ncomo texto.

también si imprime el json, para una mejor apariencia use el jsonfiltro, como:

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

Demo

Estoy de acuerdo con @Paul Weberque white-space: pre-wrap;es un mejor enfoque, de todos modos, el uso <pre>rápido, principalmente para depurar algunas cosas (si no desea perder tiempo en el estilo)

Es muy simple con CSS (funciona, lo juro).

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

• Mira ma! ¡Sin etiquetas HTML adicionales!

Con CSS esto se puede lograr fácilmente.

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

O se puede crear una clase CSS para este propósito y se puede usar desde un archivo CSS externo

Bueno, depende, si desea vincular datos, no debería haber ningún formato, de lo contrario, puede bind-htmly no description.replace(/\\n/g, '<br>') está seguro de que sea lo que desea.

la solución css funciona, sin embargo, realmente no tienes control sobre el estilo. En mi caso, quería un poco más de espacio después del salto de línea. Aquí hay una directiva que creé para manejar esto (mecanografiado):

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

Utilizar:

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

Todo lo que hace es envolver cada parte del texto en una <p>etiqueta. Después de eso, puedes diseñarlo como quieras.

Solo agrega esto a tus estilos, esto funciona para mí

white-space: pre-wrap

Por este texto <textarea>se puede mostrar como está allí con espacios y frenos de línea

HTML

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

CSS

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

Sí, me gustaría utilizar la <pre>etiqueta o utilizar ng-bind-html-unsafe http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe (uso ng-bind-html si utiliza 1.2+) después de ir .replace()a cambiar /na<br />

Solo usa el estilo css "espacio en blanco: pre-wrap" y estarás listo. He tenido el mismo problema en el que necesito manejar mensajes de error para los cuales los saltos de línea y los espacios en blanco son realmente particulares. ¡Acabo de agregar este en línea donde estaba vinculando los datos y funciona como Charm!

Tuve un problema similar para ti. No estoy tan interesado en las otras respuestas aquí porque realmente no le permiten diseñar el comportamiento de la nueva línea con mucha facilidad. No estoy seguro si tiene control sobre los datos originales, pero la solución que adopté fue cambiar los "elementos" de ser una matriz de cadenas a ser una matriz de matrices, donde cada elemento en la segunda matriz contenía una línea de texto . De esa manera puedes hacer algo como:

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

De esta manera, puede aplicar clases a los párrafos y aplicarles un estilo agradable con CSS.