備忘録 – AngularJsで改行して表示する

NO IMAGE

本日の備忘録

 

Onsen UI でスマートフォンアプリを開発中です。今日調べたことでも書こうと思います。

AngularJSで {{ hoge }} で値を埋め込んでも、文字列中の改行コードは認識されないようです。

改行するためには、 \n を <br />に変換して、サニタイズしてバインドする必要があります。

 

html
<p ng-bind-html=”hoge | replaceNewLine”></p>
replaceNewLine
angular.module(“app”).filter(‘replaceNewLine’, function($sce){
  return function (input, exp) {
    return $sce.trustAsHtml(input.replace(/\n|\r/g, ‘<br>’));
  };
});

参考サイト様 – GitHubGist – 改行コードを<br>に変換するAngularJS

 

実際の実装はサーバ側で改行コード等の変換処理を行って、アプリ側ではサニタイズのみ行いました。

備忘録はブログのネタとしては良いですね。いつもブログのネタ探しに小一時間使ってしまっているので

時短になりそうです。今後も調べたことを書きつづろうと思います。

 

では。

CTA-IMAGE

インターンシップ2020募集中!

文理不問、全学年対象で体験できるインターンシップです。たくさんの学生さんと会えることを楽しみしています、是非ご参加ください。

1DAY:業界研究&プログラミング体験
IT業界研究セミナーとscratchを用いたプログラミング体験!

1WEEK:システム開発の流れを体験!
要件定義から設計、開発、テストまで、一連の業務を体験します。