サンプルはこちら。
http://codepen.io/KazuyoshiGoto/pen/KpbAj
JavaScript
function jojos($scope){ $scope.jojos = [ {'name': 'jonasun', 'title': 'Fantom Blood'}, {'name': 'joseph', 'title': 'Battle Tendency'}, {'name': 'jotaro', 'title': 'Stardust Crusaders'} ]; };
配列の形でデータを格納しています。
HTML
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script> <div ng-app> <div ng-controller="jojos"> <p>jojosの中身:{{jojos}}</p> <!-- jojosを丸々表示 --> <p>jojosの件数:{{jojos.length}}</p> <!-- jojosの件数を表示 --> <ul> <!-- jojosの中身をjojoに分けてリピート出力 --> <li ng-repeat="jojo in jojos">name: {{jojo.name}} / title: {{jojo.title}} </li> </ul> </div> </div>
上記のようなAngularJSテンプレートで実行させます。
中でも「ng-repeat」を使った記述に注目してください。
each文のように配列の件数でループを行ってくれるので楽にデータ出力が可能です。