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

本日の備忘録

 

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

 

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

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

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

 

では。

プロフィール

愛知県名古屋市にあるジャスウィルで働く社員です。

ジャスウィルは大学事業に特化したシステムを提案しています。『大学向け事務・教務統合パッケージ―TriR Campus』を開発しています。


Facebookページでは、イベントや普段の社員の様子を公開中♪
ぜひご覧ください☆

過去一年の月別記事 全て表示