AngularJS:コントローラーとrepeatの基礎

goto_jp 437views 更新:2014年4月23日

サンプルはこちら。
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文のように配列の件数でループを行ってくれるので楽にデータ出力が可能です。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません