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' ]; });
- 作者: 外村和仁
- 出版社/メーカー: マイナビ出版
- 発売日: 2014/10/06
- メディア: Kindle版
- この商品を含むブログを見る
AngularJS 2: Simple Guide on Web App Development (2nd edition) (English Edition)
- 作者: Daniel Green
- 発売日: 2015/11/11
- メディア: Kindle版
- この商品を含むブログを見る