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

リストとリストフィルター (4/6)

作成:2015-12-26 09:36
更新:2015-12-26 09:36

■オリジナルのリストフィルター

デフォルトで用意されているリストフィルターは、あまり多くはありません。といっても、正規表現が使えるので、「パターンを書けばだいたいのことはできる」と考えてもいいでしょう。ただ、正規表現のパターンをあれこれ指定して……というのはあまり使いやすいとはいえませんね。

また、単純な値でなく、複雑な構造のオブジェクトを配列にまとめている場合は、オブジェクトに応じて必要な値を取り出しチェックするようなフィルターが必要です。

こうした場合は、フィルターを自作して使う、という選択肢もあります。テキストのフィルターと同様、リストフィルターも自分で作れるのです。これは、以下のように作ります。
コントローラー.filter( 名前 , 関数 );

テキストのフィルターと同じですね。ただし、用意する関数はちょっと違います。これは以下のようになります。
function(){
  return function( 引数 ){
    ……引数の配列を操作する……
    return 配列 ;
  }
}

関数の中で、更に関数をreturnするようになっています。このreturnされる関数が、フィルターとして実行される処理になります。

このフィルター用関数では、引数を1つ用意します。これに、データの配列が渡されます。この配列を元にして新しい配列を作成し、それをreturnすると、その配列を元にng-repeatの繰り返しが実行されるようになるのです。つまり、「いかにして新しい配列を作るか」を考えて関数を作ればいい、というわけですね。

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

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

※関連コンテンツ

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