88

\n改行文字（ ）をhtmlに変換しようとしていますbr。グーグルグループでのこの議論に
よると、これが私が持っているものです：

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

そこでの議論はまた、ビューで以下を使用することをお勧めします：

{{ dataFromModel | newline | html }}

これは古いhtmlフィルターを使用しているようですが、今はng-bind-html属性を使用することになっています。

dataFromModelとにかく、これには問題があります。元の文字列（ ）のHTMLをHTMLとしてレンダリングしたくないのです。'のみbr。

たとえば、次の文字列があるとします。

7> 5の間
、私はまだここにhtmlなどを入れたくありません...

出力したい：

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

これを達成する方法はありますか？

4

7 に答える 7

281

多分あなたはhtmlでのみこれを達成することができます、<preformated text>方法？フィルタの使用を回避したり、あらゆる種類の処理を実行したりします。

あなたがしなければならないのは、このCSSを持つ要素内のテキストを表示することです：

<p style="white-space: pre;">{{ MyMultiLineText}}</p>

これにより、\nが解析されて新しい行として表示されます。私にとっては素晴らしい作品です。

ここでは、jsFiddleの例です。

于 2013-07-31T20:50:50.230 に答える
33

新しいディレクティブをいじる代わりに、2つのフィルターを使用することにしました。

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

次に、私の見解では、一方を他方にパイプします。

<span ng-bind-html-unsafe="dataFromModel | noHTML | newlines"></span>
于 2012-12-20T19:39:57.490 に答える
26

これを行う簡単な方法は、それぞれのテキストを\nリストに分割するフィルターを作成してから、`ng-repeatを使用することです。

フィルター：

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

とhtmlで：

<span ng-repeat="line in (text | newlines) track by $index">
    <p> {{line}}</p>
    <br>
</span>
于 2013-11-06T02:11:28.350 に答える
11

無限の文字列でレイアウトを破棄したくない場合は、pre-lineを使用します。

<p style="white-space: pre-line;">{{ MyMultiLineText}}</p>
于 2018-04-30T15:09:43.707 に答える
6

Angularにhtmlを削除するサービスがあるかどうかはわかりませんが、newlinesカスタムフィルターを渡す前にhtmlを削除する必要があるようです。私がそれを行う方法は、カスタムno-htmlディレクティブを使用することです。このディレクティブには、スコーププロパティと、削除後に適用するフィルターの名前が渡されます。html 

<div no-html="data" post-filter="newlines"></div>

これが実装です

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

重要なビットはtext変数です。ここでは、中間DOM要素を作成し、メソッドを使用してHTMLを追加してから、htmlメソッドを使用してテキストのみを取得しますtext。どちらのメソッドも、AngularのライトバージョンのjQueryによって提供されます。

次の部分は、サービスnewlineを使用して実行されるフィルターの適用です。$filter

ここでプランカーを確認してください： http：//plnkr.co/edit/SEtHH5eUgFEtC92Czq7T？p = Preview

于 2012-12-20T05:24:15.087 に答える
2

現在、ng-bind-htmlを使用したフィルターの更新は次のようになります。

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

また、noHTMLフィルターは不要になりました。

ホワイトスペースソリューションのブラウザサポートが低い：http： //caniuse.com/#search=tab-size

于 2016-02-20T17:04:11.493 に答える
0

これについてはパーティーに少し遅れましたが、未定義/null文字列をチェックするための小さな改善を提案します。

何かのようなもの：

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

または（少しきつい）

.filter('newlines', function () {
    return function(text) {
        return (text instanceof String || typeof text === "string") ? text.replace(/(&#13;)?&#10;/g, '<br/>') : text;
    };
})
于 2018-01-26T10:41:56.307 に答える