フィルターを使おう (6/6)
作成:2015-12-19 19:26
更新:2015-12-19 19:26
更新:2015-12-19 19:26
■フィルターに値を設定するには?
フィルターの中には、currencyやdateのように、何らかの値を設定して呼び出すものもあります。こうしたものは、どのように作ればいいのでしょうか?
実は、簡単です。フィルターの関数を定義するとき、第2引数を用意すればいいのです。これで、第2引数に値を渡せるようになります。
実際に先ほどのフィルターgetItを修正して値を渡せるようにしてみましょう。下に簡単な例を挙げておきました。第2引数のoptの値がnullでないかチェックし、nullでない場合は、true時にその値をreturnするように修正しました。nullの場合は、「✔」をreturnします。
修正したら、HTMLファイルのobj.getを出力している部分を、例えばこんな具合に書き換えてみましょう。
これで、値がtrueだと「●」、falseだと「-」と表示されるようになります。getit:'●'というように、用意した値がそのままtrueの表示になることがわかるでしょう。いろいろ値を変更して表示を確かめてみましょう。
――フィルターは、引数からいかにreturnする値を作り出すか、がわかれば、意外と簡単に作れます。また、作ったフィルターを利用するのもとても簡単なのです。用途に応じて自分だけのフィルターを作れるようになれば、表現力もぐっとアップしますよ!
実は、簡単です。フィルターの関数を定義するとき、第2引数を用意すればいいのです。これで、第2引数に値を渡せるようになります。
実際に先ほどのフィルターgetItを修正して値を渡せるようにしてみましょう。下に簡単な例を挙げておきました。第2引数のoptの値がnullでないかチェックし、nullでない場合は、true時にその値をreturnするように修正しました。nullの場合は、「✔」をreturnします。
修正したら、HTMLファイルのobj.getを出力している部分を、例えばこんな具合に書き換えてみましょう。
<td>{{obj.get | getIt:'●'}}</td>
これで、値がtrueだと「●」、falseだと「-」と表示されるようになります。getit:'●'というように、用意した値がそのままtrueの表示になることがわかるでしょう。いろいろ値を変更して表示を確かめてみましょう。
――フィルターは、引数からいかにreturnする値を作り出すか、がわかれば、意外と簡単に作れます。また、作ったフィルターを利用するのもとても簡単なのです。用途に応じて自分だけのフィルターを作れるようになれば、表現力もぐっとアップしますよ!
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
helo.filter('getIt', function(){ return function(val,opt) { var t = (opt == null) ? '✔' : opt; return val ? t : '-'; }; } );
※関連コンテンツ