やりたい事
- true、false を HTML では任意のフォーマットに変換して表示したい。
- たとえば、true ⇒ ○、false ⇒ ×
- AngularJS を使いたい。
調べてみますと、フィルタという機能を使えば、たとえば「1」を「$1」と表示形式を指定できるようです。
さらに、自作のフィルタも作ることができるそうですので、やってみました♪
カスタムフィルタのサンプルコード
- HTML で {{true | boolean:’○’:’×’}} と書いたなら、boolean 部分が今回作った関数に結びつき、呼び出される。
- return function(boolean, true_format, false_format) { とあり、
- 引数 boolean に HTML の true が入る。
- 引数 true_format に HTML の ‘○’ が入る。
- 引数 false_format に HTML の ‘×’ が入る。
index.html
<!DOCTYPE html>
<html lang="ja" ng-app="customFilterApp">
<head>
<meta charset="UTF-8">
<title> Boolean を任意のフォーマットで表示する AngularJS のカスタムフィルターサンプル</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script>
angular.module('customFilterApp', [])
/**
* 要求されたフォーマットに基づいて、Boolean をフォーマットして返却します。
*
* @param {boolean} boolean true、またｈ false
* @param {string} true_format true のフォーマット後の返却オブジェクト
* @param {string} false_format false のフォーマット後の返却オブジェクト
* @returns フォーマットしたオブジェクト。または、引数が Boolean 以外の場合は空文字
*/
.filter('boolean', function() {
return function(boolean, trueFormat, falseFormat) {
var word = '';
if (boolean === true) {
word = trueFormat;
} else if (boolean === false) {
word = falseFormat;
}
return word;
}
});
</script>
</head>
<body>
<h2>例1. true を '○' に、false を '×' に変換して表示</h2>
<p>
<span ng-non-bindable>{{true | boolean:'○':'×'}} → </span>
<span>{{true | boolean:'○':'×'}}</span>
</p>
<p>
<span ng-non-bindable>{{false | boolean:'○':'×'}} → </span>
<span>{{false | boolean:'○':'×'}}</span>
</p>
<h2>例2. true を '達成！' に、false を '未達成です。ガンバロ！' に変換して表示</h2>
<h3>例2-1. 正常系</h3>
<p>
<span ng-non-bindable>{{true | boolean:'達成！':'未達成です。ガンバロ！'}} → </span>
<span>{{true | boolean:'達成！':'未達成です。ガンバロ！'}}</span>
</p>
<p>
<span ng-non-bindable>{{false | boolean:'達成！':'未達成です。ガンバロ！'}} → </span>
<span>{{false | boolean:'達成！':'未達成です。ガンバロ！'}}</span>
</p>
<h3>例2-2. 異常系。true、false 以外だと、なにも表示されない</h3>
<p>
<span ng-non-bindable>{{aaaaa | boolean:'達成！':'未達成です。ガンバロ！'}} → </span>
<span>{{aaaaa | boolean:'達成！':'未達成です。ガンバロ！'}}</span>
</p>
</body>
</html>
サンプルコードを実行した表示結果
おわりに
最初、参考書『AngularJSアプリケーション開発ガイド
P44、2.5 フィルタを使ったデータ形式の指定、の部分ですわ。
完成して満足！充実感♪と浸っているときに、ふと検索してみましたら、次のページのように同じことを考え、作った方がいらっしゃいました。車輪の再開発してしまいましたの＞＜。
ですけれども、コードを比較したり、他のカスタムフィルタを見て、大変勉強になりました。ありがとう存じます！
その後、悔しいですので AngularJS のフィルタについて更に勉強して、フォーマット後の文字列も指定できるように書きなおしました。
その際、メソッドコメントの書き方、引数の名前の付け方、変数や return の指定の仕方、などAngularJS のソースが大変参考になりました。
- angular.js/filters.js at master · angular/angular.js · GitHub
→ dateFilter 部分
以上です。