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!

stackoverflow.com/questions/19375695/… stackoverflow.com/questions/31917545/ng-style-with-condition stackoverflow.com/questions/18550822/… Check these all — intekhab
– intekhab, Commented Apr 4, 2016 at 7:03

Hadi · Accepted Answer · 2016-04-04 07:04:09Z

3

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>

answered Apr 4, 2016 at 7:04

Hadi

17.3k4 gold badges41 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dave Over a year ago

@YubinQiu, if it is working, feel free to update and mark as answer!

Tarun Dugar · Accepted Answer · 2016-04-04 07:02:05Z

2

use ngStyle:

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

answered Apr 4, 2016 at 7:02

Tarun Dugar

8,9938 gold badges50 silver badges81 bronze badges

Comments

Muhammad Abid · Accepted Answer · 2016-04-04 07:08:34Z

0

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

answered Apr 4, 2016 at 7:08

Muhammad Abid

8014 silver badges12 bronze badges

Collectives™ on Stack Overflow

AngularJS, CSS : Highlighting a particular table row

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related