CODEWITHSUNDEEP
javascripthtmlcssangularjs
shin1234
shin1234

Reputation: 217

AngularJS, CSS : Highlighting a particular table row

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!

Upvotes: 2

Views: 1085

Answers (3)

Muhammad Abid
Muhammad Abid

Reputation: 801

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

Upvotes: 0

Hadi
Hadi

Reputation: 17289

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>

Upvotes: 3

Tarun Dugar
Tarun Dugar

Reputation: 8971

use ngStyle:

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

Upvotes: 2

Related Questions