ループで使える便利な命令

ループで使える便利な命令
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

このWIKIを編集するにはパスワード入力が必要です

認証パスワード