back

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

■リストフィルターの作成

では、実際に簡単なリストフィルターを作って、それを利用したサンプルを考えてみましょう。まずは、スクリプトから作っていきます。script.jsを、下のリスト欄のように書き換えて下さい。

今回は、HeloCotrollerコントローラーに「getRepeat」というリストフィルターを作成しています。フィルター用にreturnされる関数部分を見ると、以下のようになっていることがわかります。
function(items){
  var res = [];
  angular.forEach(items,function(item){
    if (item.get) res.push(item);
  });
  return res;
};

ここでは、引数に渡されるitemsから、getメソッドの値がtrueのものだけを配列にまとめて返しています。配列の繰り返し処理を行うのに、angularオブジェクトの「forEach」というものを使っています。
angular.forEach( 配列 , 関数 );

このforEachは、第１引数の配列から順に要素を取り出し、第２引数の関数を実行していきます。取り出した要素は、関数に引数として渡されます。関数内では、この引数を操作することで、配列のすべての要素について処理を行えるようになっているわけです。なかなか便利な機能ですね！



(by. SYODA-Tuyano.)

※リストが表示されない場合

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

var myapp = angular.module('myapp',[]);
var helo = myapp.controller('HeloController',
    function(){
        this.count = 0;
        this.data = [
            {id:0,name:'no data',price:0,get:false},
            {id:1,name:'Android phone',price:7800,get:true},
            {id:2,name:'New iPhone',price:549020,get:true},
            {id:3,name:'windows phone',price:38765,get:true},
            {id:4,name:'firefox phone',price:14370,get:true},
            {id:5,name:'blackberry phone',price:-123,get:false},
        ];
        this.getData = function(){
            return this.data[this.count].id + ': ' + 
                this.data[this.count].name + ', ' + 
                this.data[this.count].price + '.';
        };
    }
);

//getをチェックし、trueのものだけを返す
helo.filter('getRepeat', 
    function(){
        return function(items){
            var res = [];
            angular.forEach(items,function(item){
                if (item.get) res.push(item);
            });
            return res;
        };
    }
);



　 　

記事のリストに戻る



PC Site G+ mail
copyright 2009. SYODA-tuyano.