フィルターを使おう (5/6)
作成:2015-12-19 19:24
更新:2015-12-19 19:27
更新:2015-12-19 19:27
■カスタムフィルター
フィルターは、標準で用意されているものだけでなく、自分でオリジナルのものを作ることもできます。このカスタムフィルターは、以下のような形で定義されます。
コントローラーの「filter」メソッドを使ってフィルターを登録します。引数には、フィルターの名前と、フィルターの処理を実装した関数が必要です。
引数に設定される関数は、だいたい以下のような形で定義する必要があります。
引数に渡されるのが、フィルターにかけられる元の値です。そしてreturnするのが、フィルター後の値。つまり、関数内で、引数の値をどのように変換しreturnするかを考えてコーディングすれば、フィルターは割と簡単に作れてしまうんですね。
では、簡単なサンプルを挙げておきましょう。コントローラーに用意してあるdataには、購入済みかどうかを真偽値で示す「get」という値がありました。これをもう少しわかりやすく表示するフィルターを考えてみましょう。
下のリスト欄にサンプルを掲載しておきます。これをscript.jsの末尾に追記して下さい。そして、HTMLファイルのgetを表示している部分({{obj.get}}というところ)を以下のように修正します。
これで、getしていれば「✔」が表示されるようになります。ここではvalの値に応じて"✔"または"-"のいずれかをreturnしています。これにより、trueならば「✔」、falseならば「-」と表示されるようになります。
コントローラー.filter( 名前 , 関数 );
コントローラーの「filter」メソッドを使ってフィルターを登録します。引数には、フィルターの名前と、フィルターの処理を実装した関数が必要です。
引数に設定される関数は、だいたい以下のような形で定義する必要があります。
function(val){
……略……
return 値 ;
}
引数に渡されるのが、フィルターにかけられる元の値です。そしてreturnするのが、フィルター後の値。つまり、関数内で、引数の値をどのように変換しreturnするかを考えてコーディングすれば、フィルターは割と簡単に作れてしまうんですね。
■getItフィルター
では、簡単なサンプルを挙げておきましょう。コントローラーに用意してあるdataには、購入済みかどうかを真偽値で示す「get」という値がありました。これをもう少しわかりやすく表示するフィルターを考えてみましょう。
下のリスト欄にサンプルを掲載しておきます。これをscript.jsの末尾に追記して下さい。そして、HTMLファイルのgetを表示している部分({{obj.get}}というところ)を以下のように修正します。
<td>{{obj.get | getIt}}</td>
これで、getしていれば「✔」が表示されるようになります。ここではvalの値に応じて"✔"または"-"のいずれかをreturnしています。これにより、trueならば「✔」、falseならば「-」と表示されるようになります。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
helo.filter('getIt', function(){ return function(val) { return val ? "✔" : "-"; }; } );
※関連コンテンツ