Disable Table-hover On Certain Row In Angular Bootstrap

I have a table that displays selectable information. Sometimes there are child rows that are selectable. I want the parent rows to be selectable if they have no children, otherwise

Solution 1:

Remove table-hover attribute.

Implement your ng-mouseover and ng-mouseleave functions.

$scope.hoverIn = function(row){
   row.hoverEdit = true;//check selectable or not
};
$scope.hoverOut = function(row){
   row.hoverEdit = false;
};

Define css class for hover.

.custom-hover {
  background-color: red;
}

Finally add class to your tr

`'custom-hover': x.hoverEdit`

here is: http://plnkr.co/edit/CJxi86GyM8jMbtehPQgU?p=preview Add your selectable control inside hoverIn and it will be work.

Solution 2:

try to use ng-class. it will help you.