角度の交互のクラスを設定する

私は、行が数値で表示されたテーブルを持っています。角度の交互のクラスを設定する

javascriptデータセットよりも各行のクラスを指定する「良い」方法があるのでしょうか？クラスtr1とtr2は、表の行の背景色を交互に設定します。

<!doctype html> 
<html ng-app="store"> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 

    <script type="text/javascript"> 

    (function() { 
     var app = angular.module('store', []); 

     app.controller('storeController', function() { 
      this.gems = dataArray; 
     }); 

     var dataArray = [{ 
       name: 'diamond', 
       trClass: 'tr1', 
      }, { 
       name: 'ruby', 
       trClass: 'tr2', 
      }, { 
       name: 'sapphire', 
       trClass: 'tr1', 
      }, { 
       name: 'emerald', 
       trClass: 'tr2', 
      }]; 
     })(); 

    </script> 

    <style> 
     .tr1 { 
      background-color: yellow; 
     } 
     .tr2 { 
     background-color: white; 
     } 
    </style> 

</head> 
<body ng-controller="storeController as products"> 


<table border="1"> 
    <tr ng-repeat="gem in products.gems" class="{{ gem.trClass }}"> 
     <td>{{gem.name}}</td> 
    </tr> 
</table> 

</body> 
</html>

出典

2016-04-05 Daniel Williams

あなたは、交互に、あなたのクラスを適用するng-class-oddとng-class-evenを使用することができます。

出典

2016-04-05 05:19:35 Lex

`ヨれたまま

<table border="1"> 
    <tr ng-repeat="gem in products.gems" ng-class="{$index%2==0?'tr2':'tr1'}"> 
     <td>{{gem.name}}</td> 
    </tr> 
</table>

出典

2016-04-05 05:21:44

おかげのようにクラスを変更することができますが、私はつもりは@Lexで行くよ。' –

角度の交互のクラスを設定する

答えて

関連する問題