フィルターを使おう (5/6)

フィルターは、標準で用意されているものだけでなく、自分でオリジナルのものを作ることもできます。このカスタムフィルターは、以下のような形で定義されます。

コントローラー.filter( 名前 , 関数 );

コントローラーの「filter」メソッドを使ってフィルターを登録します。引数には、フィルターの名前と、フィルターの処理を実装した関数が必要です。

引数に設定される関数は、だいたい以下のような形で定義する必要があります。

function(val){
    ……略……
    return 値 ;
}

引数に渡されるのが、フィルターにかけられる元の値です。そしてreturnするのが、フィルター後の値。つまり、関数内で、引数の値をどのように変換しreturnするかを考えてコーディングすれば、フィルターは割と簡単に作れてしまうんですね。



では、簡単なサンプルを挙げておきましょう。コントローラーに用意してある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 ? "✔" : "－";
        };
    }
);