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

備忘録 – 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

 

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

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

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

 

では。