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

フィルターの中には、currencyやdateのように、何らかの値を設定して呼び出すものもあります。こうしたものは、どのように作ればいいのでしょうか？

実は、簡単です。フィルターの関数を定義するとき、第２引数を用意すればいいのです。これで、第２引数に値を渡せるようになります。

実際に先ほどのフィルターgetItを修正して値を渡せるようにしてみましょう。下に簡単な例を挙げておきました。第２引数の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 : '-';
        };
    }
);