javascript - Angular JS，CSS : Highlighting a particular table row

Question

有什么方法可以突出显示特定的表格行吗？

我有一个表格和一组 Angular 代码，例如:

angular.module('myApp', []).controller('myTest', function($scope) {

 var data = [];
 for(var i = 0; i < 10; i++) {
      data[i] = i;
 }
 $scope.data = data; 

});

HTML:

<table ng-app="myApp" ng-controller="myTest">
 <tr ng-repeat="x in data">
      <td > {{ x }} </td>
 </tr>
</table>

http://jsfiddle.net/omarjmh/Lvc0u55v/1895/

有没有办法像这样

如果 x 等于 1然后 css:highlight tr: 蓝色？

谢谢!

Answer 1

您可以为此使用 $even 和 $odd。

angular.module('myApp', []).controller('myTest', function($scope) {

 var data = [];
 for(var i = 0; i < 10; i++) {
      data[i] = i;
 }
 $scope.data = data; 

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "myApp">
  <div ng-controller="myTest">
 <table >
 <tr ng-repeat="x in data" ng-style="{'background-color': ($even ? 'green' : 'red')}">
      <td > {{ x }} </td>
 </tr>
</table>
   </div>
</div>