Conserver les sauts de ligne dans angularjs

J'ai vu cette question SO.

Mon code au lieu de l' ng-bind="item.desc"utilise {{item.desc}}car j'ai un ng-repeatavant.

Donc mon code:

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

La description de l'élément contient \npour les retours à la ligne qui ne sont pas rendus.

Comment {{item.description}}afficher les nouvelles lignes facilement en supposant que j'ai ce qui ng-repeatprécède?

Basé sur la réponse de @pilau - mais avec une amélioration que même la réponse acceptée n'a pas.

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

Cela utilisera les nouvelles lignes et les espaces comme indiqué, mais interrompra également le contenu aux limites du contenu. Plus d'informations sur la propriété d'espace blanc peuvent être trouvées ici:

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

Si vous souhaitez interrompre les sauts de ligne, mais également réduire plusieurs espaces ou espaces blancs précédant le texte (très similaire au comportement d'origine du navigateur), vous pouvez utiliser, comme @aaki l'a suggéré:

white-space: pre-line;

Jolie comparaison des différents modes de rendu: http://meyerweb.com/eric/css/tests/white-space.html

Essayer:

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

Le <pre>wrapper imprimera le texte avec \ncomme texte

également si vous imprimez le json, pour une meilleure apparence, utilisez un jsonfiltre, comme:

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

Demo

Je suis d'accord avec @Paul Webercela, white-space: pre-wrap;c'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 à styliser)

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

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

• Regarde 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-htmlet n'êtes description.replace(/\\n/g, '<br>') pas sûr que ce soit ce que vous voulez.

la solution css fonctionne, mais vous ne contrôlez pas vraiment 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 (dactylographié):

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, c'est envelopper chaque partie du texte dans une <p>balise. Après cela, vous pouvez le coiffer comme vous le souhaitez.

Ajoutez simplement ceci à vos styles, cela fonctionne pour moi

white-space: pre-wrap

Par ce texte, <textarea>peut être affiché comme il est là-dedans avec des espaces et des freins de ligne

HTML

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

CSS

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

Oui, j'utiliserais la <pre>balise ou utiliserais 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 /nen<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 liais les données et cela fonctionne comme Charm!

J'ai eu un problème similaire à vous. Je n'aime pas trop les autres réponses ici car elles ne vous permettent pas vraiment de définir très facilement le comportement de nouvelle ligne. Je ne sais pas si vous avez le contrôle sur les données d'origine, mais la solution que j'ai adoptée a consisté à faire passer les "éléments" d'un tableau de chaînes à un tableau de tableaux, où chaque élément du deuxième tableau contenait une ligne de texte . De cette façon, vous pouvez faire quelque chose comme:

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

De cette façon, vous pouvez appliquer des classes aux paragraphes et les styliser joliment avec CSS.