11

複数の行がある可能性があるAngularjsを介してWebページに表示される文字列を取得しようとしています。これが私が持っているものです：

<textarea ng-model="StringValue"></textarea>
{{StringValue}}

テキストエリアに入力すると：

"これは

文字列"

あなたが得る：

「これは弦です」

テキストが入力されたのと同じように表示されるようにするにはどうすればよいですか?

4

8 に答える 8

17

注意してくださいng-bind-html-XSSインジェクションを取得するのは非常に簡単です。

ページに XSS を使用せずに改行のみを表示する場合は、
単純な css-rule: を使用できますwhite-space: pre。

<span style="white-space: pre">{{multilinetext}}</span>

確かに、これのために css-class を作ることができます:

<style>.pre {white-space: pre}</style>
<span class="pre">{{multilinetext}}</span>

また、このメソッドは、先頭のスペース、複数のスペース タブなど、すべての空白を表示します。

于 2015-03-04T13:58:16.887 に答える
12

これは HTML の問題です。アンギュラーではありません。Angular は、あなたが言ったことを正確に書き出します。

HTML では、タグの外側では<pre>、無限の空白 (改行、タブ、スペースなど) はすべて 1 つの空白として扱われます。これが、タグブロックを使用していない場合のよう<br/>なものが必要な理由です。&nbsp;<pre>

何が起こっているのかを理解できるように、HTML でこれを試してください。

<h3>Plain DIV</h3>
<div>
Some
   text
      here
</div>

<h3>Now with non-breaking spaces and line breaks</h3>
<div>
Some<br/>
&nbsp;&nbsp;&nbsp;text<br/>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;here<br/>
</div>

<h3>Now with a PRE tag</h3>
<pre>
Some
   text
      here
</pre>

上記を示すFiddleを次に示します。

ただし、ページ上の他のテキストのように見えるように、カスタム クラスで PRE タグのスタイルを設定する必要があります。これは、ほとんどのデフォルト スタイル<pre>が Courier やコンソラ。

それか、スペース、タブ、改行を適切なマークアップに処理する角度でフィルターを作成する必要があります。...これは維持するのが面倒です。

EDIT：上記の理解により、Angularソリューション（PREを使用しない場合）

したがって、タグを使用したくない場合の最善の解決策は<pre>、テキストをスクラブし、改行と非改行スペースでそれをファーム化するフィルターを作成することです。

このようなもの

app.filter('formatText', function (){
  return function(input) {
    if(!input) return input;
    var output = input
      //replace possible line breaks.
      .replace(/(\r\n|\r|\n)/g, '<br/>')
      //replace tabs
      .replace(/\t/g, '&nbsp;&nbsp;&nbsp;')
      //replace spaces.
      .replace(/ /g, '&nbsp;');

      return output;
  };
});

次に、それを使用するには、次のようにします。

<span ng-bind-html="foo | formatText"></span>

重要な注意事項:

  1. angular-sanitize.jsスクリプト参照にファイルを含める必要があります。
  2. 'ngSanitize'モジュール宣言でrequireする必要があります：
var app = angular.module('myApp', ['ngSanitize']);

ng-bind-html.. これは、 orng-bind-html-unsafeディレクティブを使用できるようにするためです。

これは、使用法を示すプランクです。

于 2013-08-29T14:46:48.970 に答える
2

PRE タグはいつでも使用できます。

<textarea ng-model="StringValue"></textarea>
<pre>{{StringValue}}</pre>

あなたがそれを行うかもしれない別の方法：

<textarea ng-model="StringValue"></textarea>
<span ng-bind-html-unsafe="newLineToBR(StringValue)"></span>

コントローラー関数を使用する場合:

$scope.newLineToBR = function(text) {
    return text ? text.replace(/\n/g, '<br />') : '';
};

または、@sza が示すように、より良いアプローチは、フィルターに変換することです。これが実際の例です。

于 2013-08-29T14:14:05.150 に答える
1

理由は聞かないでください。ただし、 が機能するためにreplaceは\、\n

input.replace(/\\n/g, '<br />')
于 2015-01-20T01:13:53.043 に答える
0

フィルタを使用して、改行 \n を html 改行に変換できます。

{{文字列値 | breakFilter}}

于 2013-08-29T14:16:27.317 に答える