リストとリストフィルター (1/6)
作成:2015-12-26 09:29
更新:2015-12-26 09:29
更新:2015-12-26 09:29
■リストと繰り返し処理
データを扱うWebページの場合、同じ形式の多量のデータをテーブルなどで整形して表示する、ということがよくあります。
こうした場合、何らかの「同じ表示を繰り返し実行する」という仕組みが欲しくなります。つまり、データを「こういう形で書き出す」ということだけ指定すれば、後はデータを渡せばそれら1つ1つを繰り返意同じ形式で出力してくれる、といった仕組みですね。
AngularJSには「リスト」というものがあります。これは、配列などのような形でまとめられたものの中から順に値を取り出して処理をしていくための仕組みです。これは、HTMLに属性を追加するだけで簡単に使うことができます。
では、実際にサンプルを作りながら説明をしていきましょう。まずは、スクリプトを用意しておきましょう。「script.js」というスクリプトファイルに、下のリスト欄のようなスクリプトを記述しておきましょう。
ここでは、HeloControllerというコントローラー(前回まで使っていたサンプルです)に、「data」というプロパティを用意しておきました。この中に、id, name, price, getといった項目のデータを配列としてまとめてあります。このデータを、リストで整形し表示させようというわけです。
こうした場合、何らかの「同じ表示を繰り返し実行する」という仕組みが欲しくなります。つまり、データを「こういう形で書き出す」ということだけ指定すれば、後はデータを渡せばそれら1つ1つを繰り返意同じ形式で出力してくれる、といった仕組みですね。
AngularJSには「リスト」というものがあります。これは、配列などのような形でまとめられたものの中から順に値を取り出して処理をしていくための仕組みです。これは、HTMLに属性を追加するだけで簡単に使うことができます。
では、実際にサンプルを作りながら説明をしていきましょう。まずは、スクリプトを用意しておきましょう。「script.js」というスクリプトファイルに、下のリスト欄のようなスクリプトを記述しておきましょう。
ここでは、HeloControllerというコントローラー(前回まで使っていたサンプルです)に、「data」というプロパティを用意しておきました。この中に、id, name, price, getといった項目のデータを配列としてまとめてあります。このデータを、リストで整形し表示させようというわけです。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
1 2 3 4 5 6 7 8 9 10 11 12 | 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 } ]; } ); |
※関連コンテンツ