リストとリストフィルター(2/6):初心者のためのAngularJS入門

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

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

■ng-repeatの働き

では、HTML側を作成しましょう。下のリスト欄にサンプルを掲載しておきました。このように記述をし、ブラウザで表示してみましょう。dataのデータが表に整形されて表示されます。

ここでは、テーブルを使ってデータを整形しています。この部分ですね。

<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>

※関連コンテンツ

<< prev next >>

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