angularjs newline filter mit keinem anderen html

Ich versuche zu konvertieren newline-Zeichen (\n) html br's.

Als pro diese Diskussion in der Google-Gruppe, hier ist was ich habe:

myApp.filter('newlines', function () {
    return function(text) {
        return text.replace(/\n/g, '<br/>');
    }
});

Die Diskussion gibt es auch empfiehlt, verwenden Sie die folgende in den Blick:

{{ dataFromModel | newline | html }}

Scheint dies mit der alten html filter, während wir jetzt sind, sollen die ng-bind-html Attribut.

Unabhängig, dies wirft ein problem auf: ich möchte nicht, dass HTML von den ursprünglichen string (dataFromModel) werden als HTML gerendert, nur die br's.

Betrachten Sie beispielsweise die folgende Zeichenfolge ein:

Während 7 > 5

Ich weiß immer noch nicht wollen, html & Zeug hier...

Ich würde wollen, dass es zur Ausgabe:

While 7 &gt; 5<br>I still don't want html &amp; stuff in here...

Gibt es eine Möglichkeit, dies zu erreichen?

InformationsquelleAutor der Frage MegaHit | 2012-12-20

257

Vielleicht dies können Sie erreichen, nur mit html, ein <preformated text> Weg ? Es wird vermieden, die aus der Verwendung von filtern oder zu tun, jede Art der Verarbeitung.

Alles, was Sie tun müssen, ist die Anzeige des Textes in einem element, das dieses CSS:
```
<p style="white-space: pre;">{{ MyMultiLineText}}</p>
```
Wird dies analysieren und anzeigen, \n als neue Zeilen. Funktioniert großartig für mich.

Hier ein jsFiddle-Beispiel.

InformationsquelleAutor der Antwort Devin Spikowski

Anstelle von messing mit den neuen Richtlinien, entschied ich mich, um Sie nur 2 Filter:

App.filter('newlines', function () {
    return function(text) {
        return text.replace(/\n/g, '<br/>');
    }
})
.filter('noHTML', function () {
    return function(text) {
        return text
                .replace(/&/g, '&amp;')
                .replace(/>/g, '&gt;')
                .replace(/</g, '&lt;');
    }
});

Dann, aus meiner Sicht, ich Pfeife einen in das andere:

<span ng-bind-html-unsafe="dataFromModel | noHTML | newlines"></span>

InformationsquelleAutor der Antwort MegaHit

Einen einfacheren Weg, dies zu tun ist, um einen filter, der zerlegt den text an jeder \n in eine Liste, und dann " ng-repeat.

Filter:

App.filter('newlines', function() {
  return function(text) {
    return text.split(/\n/g);
  };
});

und im html:

<span ng-repeat="line in (text | newlines) track by $index">
    <p> {{line}}</p>
    <br>
</span>

InformationsquelleAutor der Antwort JJW5432

7

Ich bin mir nicht bewusst, ob Eckig hat ein service zum strip html, aber es scheint, dass Sie brauchen, um html entfernen, bevor Sie die Weitergabe Ihrer newlines benutzerdefinierten filter. Die Art, wie ich es tun würde, ist durch eine benutzerdefinierte no-html Richtlinie, die übergeben werden würde, eine Rahmen-Eigenschaft und den Namen eines filters, der nach dem entfernen der html
```
<div no-html="data" post-filter="newlines"></div>
```
Hier ist die Implementierung
```
app.directive('noHtml', function($filter){
  return function(scope, element, attrs){
    var html = scope[attrs.noHtml];
    var text = angular.element("<div>").html(html).text();

    //post filter
    var filter = attrs.postFilter;
    var result = $filter(filter)(text);

    //apending html
    element.html(result);
  };
});
```
Der wichtige Teil ist die text variable. Hier erstelle ich eine intermediate-DOM-element und fügen Sie den HTML-Verwendung der html Methode und rufen dann erst den text mit der text Methode. Beide Methoden werden zur Verfügung gestellt von Winkel-die lite-version von jQuery.

Folgenden Teil wird die Anwendung der newline filter, was unter Verwendung der $filter service.

Überprüfen Sie die plunker hier: http://plnkr.co/edit/SEtHH5eUgFEtC92Czq7T?p=preview

InformationsquelleAutor der Antwort jaime
3

Einer Aktualisierung der filter mit ng-bind-html-aktuell wäre:
```
myApp.filter('newlines', function () {
  return function(text) {
    return text.replace(/(&#13;)?&#10;/g, '<br/>');
  }
});
```
und der noHTML-filter ist nicht mehr erforderlich.

white-space-Lösung mit low-browser-Unterstützung:
http://caniuse.com/#search=tab-size

InformationsquelleAutor der Antwort Alex Mounir
3

Wenn Sie nicht wollen, um das layout zerstören mit endlosen Zeichenketten, die pre-line:
```
<p style="white-space: pre-line;">{{ MyMultiLineText}}</p>
```
InformationsquelleAutor der Antwort slaver113

Bisschen spät zu der party, aber ich würde vorschlagen, eine kleine Verbesserung zu überprüfen, denn undefined /null-Zeichenfolgen.

Etwas wie:

.filter('newlines', function () {
    return function(text) {
        return (text) ? text.replace(/(&#13;)?&#10;/g, '<br/>') : text;
    };
})

Oder (etwas enger)

.filter('newlines', function () {
    return function(text) {
        return (text instanceof String || typeof text === "string") ? text.replace(/(&#13;)?&#10;/g, '<br/>') : text;
    };
})

InformationsquelleAutor der Antwort Ben Edge

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.