ModelのリストをViewで表示

View から Model のリストを順次読みだしながら表示する方法です。


View を作成

まず HTML で View を作成します。
コントローラを指定しておきます。

<div ng-app>
    <div ng-controller="Controller">
        <p>リストの中身を表示</p>
        <ul>
            <li>ここに配列の中身を表示したい</li>
            <li>ここに配列の中身を表示したい</li>
            <li>ここに配列の中身を表示したい</li>
        </ul>
    </div>
</div>

Controller と Model を作成

View で指定した名前の Controller を作成します。
Model として $scope に配列を追加します。
$scope に names を追加したことで View からも names へアクセスできるようになります。

var Controller = function($scope) {
    $scope.names = [
        'tanaka', 'suzuki', 'sato'
    ];
};

View でリストの表示方法を指定する

HTML の li 要素に ng-repeat を追加して配列内の要素の表示方法を指定します。
以下の例では Model の names から要素を１つずつ取り出して name へセットしています。
names の要素数だけ繰り返し li 要素を作成し、{{name}} が解釈されて文字列へ置き換わります。

<div ng-app>
    <div ng-controller="Controller">
        <p>リストの中身を表示</p>
        <ul>
            <li ng-repeat="name in names">
                {{name}}
            </li>
        </ul>
    </div>
</div>

これで以下の様に出力されます。

・tanaka
・sato
・suzuki

配列内のオブジェクトを読み出す

配列の中身がオブジェクトだった場合は、いつもどおり . をつけて要素を参照できます。
また、ng-repeat で要素を取り出している時に {{$index}} と書くことで現在の要素番号を表示できます。
ng-repeat について詳しい情報はこちらを参照してください。

ngRepeat - AngularJS
http://docs.angularjs.org/api/ng.directive:ngRepeat


以下は $index による番号表示と、配列内のオブジェクトの要素へのアクセス例です。