web-dev-qa-db-ger.com

Zeilenumbrüche in Anglejs beibehalten

Ich habe diese SO Frage gesehen.

Mein Code anstelle von ng-bind="item.desc" verwendet {{item.desc}}, da ich zuvor einen ng-repeat habe.

Also mein Code:

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

Die Artikelbeschreibung enthält \n für Zeilenumbrüche, die nicht gerendert werden.

Wie kann der {{item.description}} die Zeilenumbrüche leicht anzeigen, wenn ich davon ausgehe, dass ich den ng-repeat oben habe?

angularjsangularjs-ng-repeat
152
Diolor

Basierend auf der Antwort von @pilau - aber mit einer Verbesserung, die selbst die akzeptierte Antwort nicht hat.

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

Hierbei werden Zeilenumbrüche und Leerzeichen wie vorgegeben verwendet, aber auch Inhalte werden an den Inhaltsgrenzen gebrochen. Weitere Informationen zur White-Space-Eigenschaft finden Sie hier:

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

Wenn Sie Zeilenumbrüche durchbrechen möchten, aber auch mehrere Leerzeichen oder Leerzeichen vor dem Text reduzieren möchten (sehr ähnlich dem ursprünglichen Browserverhalten), können Sie wie von @aaki empfohlen Folgendes verwenden:

white-space: pre-line;

Netter Vergleich der verschiedenen Rendering-Modi: http://meyerweb.com/eric/css/tests/white-space.html

240
Paul Weber

Versuchen:

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

Der Wrapper <pre> druckt Text mit \n als Text

auch wenn du den json druckst, benutze zum besseren schauen den json filter, wie:

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

Demo

Ich bin mit @Paul Weber einverstanden, dass white-space: pre-wrap; ein besserer Ansatz ist, auf jeden Fall mit <pre> - der schnelle Weg, um einige Dinge zu debuggen (wenn Sie keine Zeit mit dem Styling verschwenden möchten)

126
Maxim Shoustin

Es ist so einfach mit CSS (es funktioniert, ich schwöre es).

.angular-with-newlines {
  white-space: pre;
}
  • Schau ma! Keine zusätzlichen HTML-Tags!
60
pilau

Mit CSS ist dies leicht zu erreichen.

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

Oder eine CSS-Klasse kann zu diesem Zweck erstellt und aus externen CSS-Dateien verwendet werden 

15
Rehan

Nun, es hängt davon ab, ob Sie Daten binden möchten, es sollte keine Formatierung enthalten. Andernfalls können Sie bind-html und description.replace(/\\n/g, '<br>')

2
Nicolas Brugneaux

die css-lösung funktioniert, aber Sie können das Styling nicht wirklich steuern. In meinem Fall wollte ich nach dem Zeilenumbruch etwas mehr Platz. Hier ist eine Anweisung, die ich erstellt habe, um dieses (TypeScript) zu behandeln:

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

Benutzen:

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

Alles, was es tut, ist, dass jeder Teil des Texts in ein <p>-Tag eingepackt wird.

1
Dmitry

Verwenden Sie einfach den CSS-Stil "White-Space: Pre-Wrap" und Sie sollten sich gut fühlen. Ich hatte das gleiche Problem, bei dem ich Fehlermeldungen behandeln muss, bei denen die Zeilenumbrüche und Leerzeichen wirklich besonders sind. Ich habe diese Inline nur dort hinzugefügt, wo ich die Daten gebunden habe und es funktioniert wie Charm!

0
Siddhartha Thota

Ja, ich würde entweder das <pre>-Tag verwenden oder ng-bind-html-unsafehttp://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe verwenden (verwenden Sie ng-bind-html, wenn Sie verwenden 1.2+) nach der Verwendung von .replace() zum Ändern von /n in <br />

0
NicolasMoise

Ich hatte ein ähnliches Problem mit dir. Ich bin nicht so begeistert von den anderen Antworten hier, da sie es nicht wirklich erlauben, das Verhalten der Zeilenumbrüche sehr leicht zu gestalten. Ich bin mir nicht sicher, ob Sie die ursprünglichen Daten kontrollieren können, aber die Lösung, die ich gewählt habe, bestand darin, "Elemente" von einem String-Array zu einem Array von Arrays zu machen, wobei jedes Element im zweiten Array eine Textzeile enthielt . Auf diese Weise können Sie Folgendes tun:

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

Auf diese Weise können Sie Klassen auf die Absätze anwenden und sie mit CSS schön gestalten.

0
Chris Rae

Füge dies einfach deinen Styles hinzu, das funktioniert bei mir

white-space: pre-wrap

Durch diesen Text in <textarea> kann angezeigt werden, wie es dort mit Leerzeichen und Linienbremsen ist

HTML

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

CSS

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