libro
www.tuyano.com
初心者のためのAngularJS入門

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

作成:2015-12-19 19:26
更新:2015-12-19 19:26

■フィルターに値を設定するには?

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

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

実際に先ほどのフィルターgetItを修正して値を渡せるようにしてみましょう。下に簡単な例を挙げておきました。第2引数のoptの値がnullでないかチェックし、nullでない場合は、true時にその値をreturnするように修正しました。nullの場合は、「✔」をreturnします。

修正したら、HTMLファイルのobj.getを出力している部分を、例えばこんな具合に書き換えてみましょう。
<td>{{obj.get | getIt:'●'}}</td>

これで、値がtrueだと「●」、falseだと「-」と表示されるようになります。getit:'●'というように、用意した値がそのままtrueの表示になることがわかるでしょう。いろいろ値を変更して表示を確かめてみましょう。

――フィルターは、引数からいかにreturnする値を作り出すか、がわかれば、意外と簡単に作れます。また、作ったフィルターを利用するのもとても簡単なのです。用途に応じて自分だけのフィルターを作れるようになれば、表現力もぐっとアップしますよ!

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

helo.filter('getIt', 
    function(){
        return function(val,opt) {
            var t = (opt == null) ? '✔' : opt;
            return val ? t : '-';
        };
    }
);

※関連コンテンツ

「初心者のためのAngularJS入門」に戻る