AngularJS，CSS：突出显示特定的表行

Question

is there any way to highlight a particular table row?

I have a table and a set if angular codes for example for example:

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/

Is there anyway to do it like

if x is equal to 1 then css:highlight tr: blue ?

Thanks!

Answer 1

you can use $even and $odd for this.

 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> 

Answer 2

使用ngStyle ：

tr ng-repeat="x in data" ng-style="{'background-color': (x === 1 ? 'blue' : 'white')}"

Answer 3

You can achieve it by using CSS,

tr:nth-child(even) {
    background-color: #000000;
}

even/odd both works.

Or with angular,

You should be using the angular directives ngClassEven and ngClassOdd for this.

Have a look at the documentation section for how to use them

http://docs.angularjs.org/api/ng.directive:ngClassEven

http://docs.angularjs.org/api/ng.directive:ngClassOdd