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 $()?
Simplest way is to do it with CSS and not rely on angular.
tr:hover {
background-color: red;
color: white;
}
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">
...
var app = angular.module("myapp", []);
app.controller("ListController", ['$scope', function($scope) {
$scope.personalDetails = [
{
'fname':'Muhammed',
'lname':'Shanid',
'email':'[email protected]'
},
{
'fname':'John',
'lname':'Abraham',
'email':'[email protected]'
},
{
'fname':'Roy',
'lname':'Mathew',
'email':'[email protected]'
}];
}]);.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>
