リストとリストフィルター (2/6)
作成:2015-12-26 09:32
更新:2015-12-26 09:32
更新:2015-12-26 09:32
■ng-repeatの働き
では、HTML側を作成しましょう。下のリスト欄にサンプルを掲載しておきました。このように記述をし、ブラウザで表示してみましょう。dataのデータが表に整形されて表示されます。
ここでは、テーブルを使ってデータを整形しています。この部分ですね。
<table>には、特に仕掛けはありません。仕掛けは、その中にある<tr>タグにあります。ここでリストによる繰り返しの属性(ディレクティブ)が用意されています。これは以下のように記述します。
この「ng-repeat」は、用意されている配列から値を取り出して変数に設定し、このng-repeatが書かれているタグを出力します。つまり、配列に保管されている値の数だけ、ng-repeatが書かれているタグが書き出されることになります。<tr>タグ内にある<td>タグを見ると、
このように、配列から取り出される変数objのオブジェクト内のプロパティを指定して出力させています。オブジェクトを配列にまとめておけば、こんな具合にオブジェクト内の値も自由に扱えます。
ここでは、テーブルを使ってデータを整形しています。この部分ですね。
<table >
<tr><th>……略……</th></tr>
<tr ng-repeat="obj in ctl.data">
<td>{{obj.id}}</td>
<td>{{obj.name}}</td>
<td>{{obj.price | currency:"¥"}}</td>
<td>{{obj.get }}</td>
</tr>
</table>
<table>には、特に仕掛けはありません。仕掛けは、その中にある<tr>タグにあります。ここでリストによる繰り返しの属性(ディレクティブ)が用意されています。これは以下のように記述します。
ng-repeat="変数 in 配列"
この「ng-repeat」は、用意されている配列から値を取り出して変数に設定し、このng-repeatが書かれているタグを出力します。つまり、配列に保管されている値の数だけ、ng-repeatが書かれているタグが書き出されることになります。<tr>タグ内にある<td>タグを見ると、
<td>{{obj.id}}</td>
このように、配列から取り出される変数objのオブジェクト内のプロパティを指定して出力させています。オブジェクトを配列にまとめておけば、こんな具合にオブジェクト内の値も自由に扱えます。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!doctype html> <html> <head> <title>AngularJS Sample</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="script.js"></script> <style> body { color:gray; } h1 { font-size:18pt; font-weight:bold; } span.label { display:inline-block;width:50px; color:red; } input { width:100px; } .msg { font-size:14pt; font-weight:bold;color:gray; } th { color:#eee; background-color:#999; padding: 5px 10px;} td { color:#333; background-color:#ddd; padding: 5px 10px;} </style> </head> <body ng-app="myapp" ng-init="num=0"> <h1>データ表示</h1> <div ng-controller="HeloController as ctl"> <table > <tr><th>ID</th><th>NAME</th><th>PRICE</th><th>GET?</th></tr> <tr ng-repeat="obj in ctl.data"> <td>{{obj.id}}</td> <td>{{obj.name}}</td> <td>{{obj.price | currency:"¥"}}</td> <td>{{obj.get }}</td> </tr> </table> </div> </body> </html>
※関連コンテンツ