web-dev-qa-db-fra.com

Préserver les ruptures de ligne dans les angularjs

J'ai vu cette SO question.

Mon code au lieu de ng-bind="item.desc" utilise {{item.desc}} parce que j'ai un ng-repeat auparavant.

Donc mon code:

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

La description de l'article contient \n pour les nouvelles lignes qui ne sont pas rendues.

Comment le {{item.description}} peut-il afficher facilement les nouvelles lignes en supposant que j'ai le ng-repeat ci-dessus?

angularjsangularjs-ng-repeat
152
Diolor

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 cassera également le contenu aux limites du contenu. Plus d'informations sur la propriété white-space peuvent être trouvées ici:

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

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

white-space: pre-line;

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

240
Paul Weber

Essayer:

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

Le wrapper <pre> imprimera du texte avec \n comme texte

également si vous imprimez le JSON, pour un meilleur rendu, utilisez le filtre json, comme ceci:

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

Demo

Je suis d'accord avec @Paul Weber pour dire que white-space: pre-wrap; est une meilleure approche, en tout état de cause, utilisez <pre> - le moyen rapide principalement pour déboguer des choses (si vous ne voulez pas perdre de temps en style).

126
Maxim Shoustin

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

.angular-with-newlines {
  white-space: pre;
}
  • Regardez ma! Pas de balises HTML supplémentaires!
60
pilau

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 

15
Rehan

Cela dépend, si vous voulez lier des données, il ne devrait y avoir aucune mise en forme, sinon vous pouvez bind-html et faire description.replace(/\\n/g, '<br>') Ne savez pas si c'est ce que vous voulez.

2
Nicolas Brugneaux

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 (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 d’envelopper chaque partie du texte dans une balise <p> .

1
Dmitry

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

0
Siddhartha Thota

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

0
NicolasMoise

J'ai eu un problème similaire à vous. Je ne suis pas très intéressé par les autres réponses ici, car elles ne vous permettent pas vraiment de dénommer le comportement de nouvelle ligne très facilement. Je ne sais pas si vous avez le contrôle sur les données d'origine, mais la solution que j'ai adoptée consistait à faire passer les "éléments" d'un tableau de chaînes à un tableau de tableaux, chaque élément du deuxième tableau contenant 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 styler joliment avec CSS.

0
Chris Rae

Ajoutez simplement ceci à vos styles, cela fonctionne pour moi

white-space: pre-wrap

Par ce texte dans <textarea>peut être affiché car il est là avec des espaces et des freins de ligne

HTML

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

CSS

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