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

データを扱うWebページの場合、同じ形式の多量のデータをテーブルなどで整形して表示する、ということがよくあります。

こうした場合、何らかの「同じ表示を繰り返し実行する」という仕組みが欲しくなります。つまり、データを「こういう形で書き出す」ということだけ指定すれば、後はデータを渡せばそれら１つ１つを繰り返意同じ形式で出力してくれる、といった仕組みですね。

AngularJSには「リスト」というものがあります。これは、配列などのような形でまとめられたものの中から順に値を取り出して処理をしていくための仕組みです。これは、HTMLに属性を追加するだけで簡単に使うことができます。

では、実際にサンプルを作りながら説明をしていきましょう。まずは、スクリプトを用意しておきましょう。「script.js」というスクリプトファイルに、下のリスト欄のようなスクリプトを記述しておきましょう。

ここでは、HeloControllerというコントローラー（前回まで使っていたサンプルです）に、「data」というプロパティを用意しておきました。この中に、id, name, price, getといった項目のデータを配列としてまとめてあります。このデータを、リストで整形し表示させようというわけです。

(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:false},
            {id:3,name:'windows phone',price:38765,get:true}
        ];
    }
);