Preservar quebras de linha em angularjs

Eu já vi essa pergunta.

Meu código em vez de ng-bind="item.desc"usa {{item.desc}}porque eu tenho um ng-repeatantes.

Então meu código:

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

A descrição do item contém \npara novas linhas que não são renderizadas.

Como a {{item.description}}exibição das novas linhas pode facilmente assumir que eu tenho o ng-repeatdescrito acima?

Com base na resposta de @pilau - mas com uma melhoria que nem a resposta aceita possui.

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

Isso usará novas linhas e espaços em branco, conforme indicado, mas também interromperá o conteúdo nos limites do conteúdo. Mais informações sobre a propriedade de espaço em branco podem ser encontradas aqui:

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

Se você deseja quebrar as novas linhas, mas também recolher vários espaços ou espaços em branco antes do texto (muito semelhante ao comportamento original do navegador), use-o como sugeriu @aaki:

white-space: pre-line;

Boa comparação dos diferentes modos de renderização: http://meyerweb.com/eric/css/tests/white-space.html

Experimentar:

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

O <pre>invólucro imprimirá o texto com \no texto

Além disso, se você imprimir o json, para obter uma melhor aparência, use o jsonfiltro, como:

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

Demo

Eu concordo com @Paul Webera white-space: pre-wrap;melhor abordagem, de qualquer maneira, usando <pre>- o caminho mais rápido para depurar algumas coisas (se você não quiser perder tempo em estilizar)

É tão simples com CSS (funciona, eu juro).

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

• Olha ma! Sem tags HTML extras!

Com CSS, isso pode ser alcançado facilmente.

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

Ou uma classe CSS pode ser criada para esse fim e pode ser usada em um arquivo CSS externo

Bem, depende, se você deseja vincular dados, não deve haver formatação, caso contrário, você pode bind-htmle não description.replace(/\\n/g, '<br>') tem certeza de que é o que deseja.

a solução css funciona, no entanto, você realmente não tem controle sobre o estilo. No meu caso, eu queria um pouco mais de espaço após a quebra de linha. Aqui está uma diretiva que eu criei para lidar com isso (texto datilografado):

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

Usar:

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

Tudo o que faz é agrupar cada parte do texto em uma <p>tag. Depois disso, você pode modelá-lo como quiser.

Basta adicionar isso aos seus estilos, isso funciona para mim

white-space: pre-wrap

Por esse texto, <textarea>pode ser exibido como está lá com espaços e freios de linha

HTML

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

CSS

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

Sim, eu usaria a <pre>tag ou ng-bind-html-unsafe http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe (use ng-bind-html se você estiver usando 1.2+) depois de usar .replace()para mude /npara<br />

Basta usar o estilo css "white-space: pre-wrap" e você deve estar pronto. Eu tive o mesmo problema em que preciso lidar com mensagens de erro para as quais as quebras de linha e os espaços em branco são realmente particulares. Acabei de adicionar este inline onde vinculava os dados e funciona como um encanto!

Eu tive um problema semelhante a você. Não estou muito interessado nas outras respostas aqui, porque elas realmente não permitem que você estilize o comportamento da nova linha com muita facilidade. Não tenho certeza se você tem controle sobre os dados originais, mas a solução que eu adotei foi mudar "itens" de uma matriz de seqüências de caracteres para uma matriz de matrizes, onde cada item na segunda matriz continha uma linha de texto . Dessa forma, você pode fazer algo como:

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

Dessa forma, você pode aplicar classes aos parágrafos e estilizá-las com CSS.