ループで使える便利な命令
ループで使える便利な命令
ng-repeatでループを回しているときに返ってきた値が何番目かを知りたい場合
{{$index}}をつける
下記の構文のようにするとmyscript.jsから返ってくるnameに番号がふられて
返ってきます。
<div ng-controller="mainCtrl"> <ul> <li ng-repeat="user in users"> {{$index}}{{user.name}}{{user.score}} </li>
このままだと0から番号が振られてしまうので順位といった場合は+1をすると
1から番号が振られてきます。
<div ng-controller="mainCtrl"> <ul> <li ng-repeat="user in users"> {{$index+1}}{{user.name}}{{user.score}} </li>
最初の要素か、中間の要素か、最後の要素かを知りたいとき
{{$first}} {{$middle}} {{$last}}
true falseで返してくれます。例えばはじめの1レコード目の
返り値は
1true false falsetakahashi52.22 であり、この1レコードははじめの要素が
trueで返ってきてるので1レコード目ということがわかります。
2レコード目だったら
2false true falsetanaka38.22
のように中間なので、2番目のmiddleの返り値がtrueとして返ってきています。
最終行の場合は、
8false false truekensuke72.2
のように3番目のlastの返り値がtrueとして返ってきてる状態です。
<div ng-controller="mainCtrl"> <ul> <li ng-repeat="user in users"> {{$index+1}}{{$first}} {{$middle}} {{$last}}{{user.name}}{{user.score}} </li> </ul> </div>
偶数行と奇数行に色をそれぞれつけたいとき
ng-class-even
ng-class-odd
※偶数奇数の要素に対して特定のクラスをつけるもの
ngClassOddとngClassEvenディレクティブは、厳密にはngClassとして動作し、ngRepeatと組み合わせて動作させることが期待されており、偶数行にだけ反映されます。
このディレクティブは、ngRepeatのスコープ内でのみ適用されます。
下記の例では
ng-repeat内のng-class-even="'even'" ng-class-odd="'odd'"が
<li ng-repeat="user in users" ng-class-even="'even'" ng-class-odd="'odd'">
<style>で定義されたevenとoddの色を呼び出している形となります。
<style> .even{ background:#ccc; } .odd{ background:red; } </style>
</head>
<body>
<h1>Angularの練習</h1> <div ng-controller="mainCtrl"> <ul> <li ng-repeat="user in users" ng-class-even="'even'" ng-class-odd="'odd'"> {{$index+1}}{{$first}} {{$middle}} {{$last}}{{user.name}}{{user.score}} </li> </ul> </div>
サンプルHTML
<!DOCTYPE html>
<html lang="ja" ng-app>
<head>
<meta charaset="UTF-8"> <title>Angularの練習だよん</title> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> <script src="myscript.js"></script> <style> .even{ background:#ccc; } .odd{ background:red; } </style>
</head>
<body>
<h1>Angularの練習</h1> <div ng-controller="mainCtrl"> <ul> <li ng-repeat="user in users" ng-class-even="'even'" ng-class-odd="'odd'"> {{$index+1}}{{$first}} {{$middle}} {{$last}}{{user.name}}{{user.score}} </li> </ul> </div>
</body>
</html>
サンプルmyscript.js
var mainCtrl = function($scope){
$scope.users = [ {"name":"takahashi", "score":52.22}, {"name":"tanaka", "score":38.22}, {"name":"ishida", "score":11.11}, {"name":"nagahama", "score":5.25}, {"name":"muto", "score":82.4}, {"name":"hashimoto", "score":55.21}, {"name":"tyouno", "score":32.8}, {"name":"kensuke", "score":72.2}, ]; $scope.today = new Date();
}
- 最終更新:2015-02-18 00:37:48