AngularJSで繰り返し処理を実装する

ng-repeatを使ってみる

ng-repeatを使えば繰り返しを簡単に実装できます。
リストの繰り返し処理や絞込みに使われることが多いです。

○HTML

<div ng-controller="MainCtrl">
  <ul ng-repeat="name in names">
    <li>{{name}}</li>
  </ul>
</div>


○JavaScript

var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
  $scope.names = [
  	'Kazuhito nakamura',
  	'Takeshi matsumoto',
  	'akihiro Tanama',
  	'sayaka takeda',
  	'yoko yamada'
  ];

});

ng-repeatで使うことができる特殊変数

$index: 0から始まる現在のループの位置を示す
$first: ループの一回目ならtrue,それ以外のときはfalse
$middle: ループの最初と最後でなければtrue,それ以外のときはfalse
$last: ループの最後であればtrue, それ以外のときはfalse
$even: $indexが偶数の時はtrue, 奇数の時はfalse
$odd: $indexが奇数の時はtrue, 偶数の時はfalse


○HTML

<div ng-controller="MainCtrl">
  <table>
    <tr>
      <th>value</th>
      <th>$index</th>
      <th>$first</th>
      <th>$middle</th>
      <th>$last</th>
      <th>$even</th>
      <th>$odd</th>
    </tr>
    <tr ng-repeat="name in names">
      <td>{{name}}</td>
      <td>{{$index}}</td>
      <td>{{$first}}</td>
      <td>{{$middle}}</td>
      <td>{{$last}}</td>
      <td>{{$even}}</td>
      <td>{{$odd}}</td>
    </tr>
  </table>
</div>


○JavaScript

var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
  $scope.names = [
  	'Kazuhito nakamura',
  	'Takeshi matsumoto',
  	'akihiro Tanama',
  	'sayaka takeda',
  	'yoko yamada'
  ];

});


Webアプリ構築のためのAngularJS

Webアプリ構築のためのAngularJS