Préserver les sauts de ligne dans angularjs

Essayez:

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

Le <pre> wrapper imprimer le texte avec \n texte

Aussi, si vous imprimez le json, pour le meilleur look utiliser json filtre, comme:

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

Démo

Je suis d'accord avec @Paul Weber que white-space: pre-wrap; est une meilleure approche, de toute façon en utilisant <pre> - le moyen rapide principalement pour déboguer certaines choses (si vous ne voulez pas perdre de temps sur le style)

C'est si simple avec CSS (ça marche, je le jure).

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

• Regardez ma! Pas de balises HTML supplémentaires!

Avec CSS, cela peut être réalisé facilement.

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

Ou une classe CSS peut être créée à cet effet et peut être utilisée à partir d'un fichier CSS externe

Eh bien, cela dépend, si vous voulez lier des données, il ne devrait pas y avoir de formatage, sinon vous pouvez bind-html et faire description.replace(/\\n/g, '<br>') pas sûr que ce soit ce que vous voulez cependant.

La solution css fonctionne, mais vous n'avez pas vraiment le contrôle sur le style. Dans mon cas, je voulais un peu plus d'espace après le saut de ligne. Voici une directive que j'ai créée pour gérer cela (typescript):

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

Utilisation:

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

Tout ce qu'il fait est encapsule chaque partie du texte dans un <p> balise. Après cela, vous pouvez le styliser comme vous le souhaitez.

Oui, je voudrais soit utiliser la balise <pre> ou utiliser ng-bind-html-unsafe http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe (utilisez ng-bind-html si vous utilisez 1.2+) après avoir utilisé .replace() pour changer /n en <br />

Utilisez simplement le style css "white-space: pre-wrap" et vous devriez être prêt à partir. J'ai eu le même problème où je dois gérer les messages d'erreur pour lesquels les sauts de ligne et les espaces blancs sont vraiment particuliers. Je viens d'ajouter cette ligne où je reliais les données et cela fonctionne comme un charme!