[SOLVED] Set background color of table column with AngularJS

Set background color of table column with AngularJS

I would like to set the background color of a table column with AngularJS.

I found an example without AngularJS:

$('td').hover(function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').addClass('highlighted');
},
function() {
    var t = parseInt($(this).index()) + 1;
    $('td:nth-child(' + t + ')').removeClass('highlighted');
 });

I did not found any example with AngularJS. Is there a way to get the index with AngularJS and what to use for $()?

Solution

CSS Solution (Best):

Simplest way is to do it with CSS and not rely on angular.

tr:hover {
  background-color: red;
  color: white;
}

Angular only solution:

If you want it the angular way, use ng-init to initialize the hover state to false, then use ng-mouseover and ng-mouseout to track the hover state, then use ng-class to show the class.

<tr ng-repeat="personalDetail in personalDetails track by $index"
   ng-class="{ 'highlighted': hovered }" ng-mouseover="hovered=true" 
   ng-mouseout="hovered=false" ng-init="hovered=false">
   ...

Working example:

var app = angular.module("myapp", []);
    app.controller("ListController", ['$scope', function($scope) {
        $scope.personalDetails = [
            {
                'fname':'Muhammed',
                'lname':'Shanid',
                'email':'shanid@shanid.com'
            },
            {
                'fname':'John',
                'lname':'Abraham',
                'email':'john@john.com'
            },
            {
                'fname':'Roy',
                'lname':'Mathew',
                'email':'roy@roy.com'
            }]; 
    }]);

.highlighted {
  background-color: red;
  color: white;
}


/*
tr:hover {
  background-color: red;
  color: white;
}
*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.3/angular.min.js"></script>
<body ng-app="myapp" ng-controller="ListController">
  <table class="table table-striped table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="personalDetail in personalDetails track by $index" ng-class="{ 'highlighted': hovered }" ng-mouseover="hovered=true" ng-mouseout="hovered=false" ng-init="hovered=false">
        <td>
          <input type="text" class="form-control" ng-model="personalDetail.fname" required/>
        </td>
        <td>
          <input type="text" class="form-control" ng-model="personalDetail.lname" required/>
        </td>
        <td>
          <input type="email" class="form-control" ng-model="personalDetail.email" required/>
        </td>
      </tr>
    </tbody>
  </table>
</body>