How to apply css class to selected row in ng-repeat - angularjs

Question

I have a ng-repeate table. I need to toggleClass for each selected row. Here is my code:
<tr ng-repeat="expenses in Expensereports" ng-mouseenter='showpencil=true' ng-mouseleave='showpencil=false' ng-class="{'selectedrow':selectDelete}">
<td class="text-center">
<input type="checkbox" ng-model='expenses.isDelete' class='deletebox' ng-change='selectedDeleteRow(expenses.isDelete)'/>
</td>
<td class="text-center">{{expenses.date | parseDateFormat | date}}</td>
<td class="text-center">{{expenses.type}}</td>
</tr>
My JS Code:
$scope.selectedDeleteRow = function(selected){
if(selected==true){
$scope.selectDelete=true;
}else{
$scope.selectDelete=false;
}
}
What I want is that if user check the checkbox, I need to hightlight the whole row. but leave other unchecked row alone, simply says is let user know this row is selected, if they uncheck that row, the class will be gone.

Answer 1

ng-class="{'selectedrow': expenses.isDelete}" should work.
var app = angular.module('myApp', []);
app.controller('test', function($scope) {
$scope.Expensereports = [
{'test': 'Row 1'},
{'test': 'Row 2'},
{'test': 'Row 3'}
];
});
tr.selectedrow {
background-color: red;
}
<div ng-app="myApp">
<table ng-controller="test">
<tr ng-repeat="expenses in Expensereports" ng-class="{'selectedrow': expenses.isDelete}">
<td>
<input type="checkbox" ng-model="expenses.isDelete" ng-change="selectedDeleteRow(expenses.isDelete)"/>
</td>
<td class="text-center">{{expenses.test}}</td>
</tr>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

Answer 2

In Angular you can use [ngClass]:
<tr *ngFor="let expenses in Expensereports" [ngClass]="{'selectedrow': expenses.isDelete}">
...
</tr>