hello foo bar Saba note | AngularJSの配列表示

AngularJSの配列表示

2016.7.30 (土)

データの表示についてはこの数十年間どの言語も意地をかけて挑戦してきました。perlのforeach、jQueryのeach、Javascriptのfor、PHPのforeach、そしてAngularJSのng-repeatというものです。前回の例では配列をダンプしたみたいな感じでおよそ実用には伴わないものでした。これを秩序をもって表示しようというものです。コントローラは前回と同じものを用いています。
配列は、

$scope.tests = [
    {"language":"PHP", "memo":"馬鹿"},
    {"language":"Javasctript", "memo":"変態"},
    {"language":"Ruby", "memo":"エリート"},
    {"language":"C", "memo":"他人"},
    {"language":"Go", "memo":"外人"},
];

こんな感じです。

ng-repeat

AngularJSにはng-repeatというむちゃくちゃよく使うディレクティブがあります。いわゆるループです。ループは殆どの場合、配列や配列的なデータ構造をもったオブジェクトなどを扱える関数になります。面倒なので、結果から書きます。

<body ng-controller="Test">
    <div ng-repeat="v in tests">
    {{v}}
    </div>
</body>

sample
ng-repeatはコントローラの有効範囲内で利用できます。上記の例では、testsという配列から1行づつ取り出して、vに値を入れて表示するというものになります。キャリアのあるプログラマーさんにはもう説明はいらないでしょう。
配列の要素を取り出すには、

<body ng-controller="Test">
    <div ng-repeat="v in tests">
    {{v.language}}は{{v.memo}}
    </div>
</body>

こんな感じです。直感的にわかりやすいです。
sample