AngularJS, CSS : Highlighting a particular table row

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!

http://stackoverflow.com/questions/19375695/angular-ng-style-with-a-conditional-expression http://stackoverflow.com/questions/31917545/ng-style-with-condition http://stackoverflow.com/questions/18550822/angular-ng-repeat-add-style-on-condition Check these all — intekhab, Apr 04 '16 at 07:03

score 3 · Answer 1 · answered Apr 04 '16 at 07:04

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>

@YubinQiu, if it is working, feel free to update and mark as answer! — Dave, Apr 04 '16 at 07:27

score 2 · Answer 2 · answered Apr 04 '16 at 07:02

2

use ngStyle:

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

answered Apr 04 '16 at 07:02

Tarun Dugar

8,921
8
42
79

score 0 · Answer 3 · answered Apr 04 '16 at 07:08

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

AngularJS, CSS : Highlighting a particular table row

3 Answers3