Einstellen alternierender Klassen in Angular

Ich habe eine Tabelle mit den Zeilen von Angular bevölkert.Einstellen alternierender Klassen in Angular

Ich frage mich, ob es eine "bessere" Möglichkeit gibt, die Klasse für jede Zeile als in der Javascript-Dataset anzugeben? Die Klassen tr1 und tr2 setzen eine alternierende Hintergrundfarbe für die Tabellenzeilen.

<!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>

Quelle

2016-04-05 Daniel Williams

könnten Sie ng-class-odd und ng-class-even verwenden abwechselnd Ihre Klassen anzuwenden.

Quelle

2016-04-05 05:19:35 Lex

Yo kann Klasse wie AS-

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

Quelle

2016-04-05 05:21:44

Dank ändern, aber ich werde mit @lex gehen '' –

Einstellen alternierender Klassen in Angular

Antwort

Verwandte Themen