Issues when try to apply css class on rows - html

Question

I've got this table:
<table id="mytable" st-safe-src="dataSetREST" st-table="displayed" class="table table-responsive portlet-body panel-body">
<thead>
<tr >
<th >A</th>
<th >B</th>
<th >C</th>
<th >D</th>
<th >E</th>
<th >F</th>
<th >G</th>
<th >H</th>
</tr>
</thead>
<tbody data-ng-dblclick="scrollTo()">
<tr data-ng-repeat="row in displayed" st-select-row="row" st-select-mode="single" data-ng-class="{'selected':$index == selectedRow}" data-ng-click="setClickedRow($index)">
<td data-ng-click="$parent.selData(row);">{{$index}}</td>
<td data-ng-click="$parent.selData(row);">{{row.asd}}</td>
<td data-ng-click="$parent.selData(row);">{{row.sad}}</td>
<td data-ng-click="$parent.selData(row);">{{row.dsa}}</td>
<td data-ng-click="$parent.selData(row);">{{row.das}}</td>
<td data-ng-click="$parent.selData(row);">{{row.sda}}</td>
<td data-ng-click="$parent.selData(row);">{{row.ads}}</td>
<td data-ng-click="$parent.selData(row);">{{row.etc}}</td>
</tr>
</tbody>
</table>
I need to apply a background color on the selected row. In the controller I added this:
$scope.selectedRow = null;
$scope.setClickedRow = function(index){
$scope.selectedRow = index;
}
It should work since in data-ng-click I send the index to the method, but it didn't enter the method (or at least didnt print a console.log() placed inside). Here the css class:
.selected {
background-color: #67BBED;
}

Answer 1

check this fiddle it's working great http://jsfiddle.net/linkolen/tq31h4bw/#base
angular.module('myApp', []);
function TestCtrl($scope) {
$scope.selectedRow = null;
$scope.displayed = [{asd:3},{asd:3},{asd:3},{asd:3},{asd:3},{asd:3}]
$scope.setClickedRow = function(index){
$scope.selectedRow = index;
}
}
.selected {
background-color: #67BBED;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="TestCtrl">
<table id="mytable" st-safe-src="dataSetREST" st-table="displayed" class="table table-responsive portlet-body panel-body">
<thead>
<tr >
<th >A</th>
<th >B</th>
<th >C</th>
<th >D</th>
<th >E</th>
<th >F</th>
<th >G</th>
<th >H</th>
</tr>
</thead>
<tbody data-ng-dblclick="scrollTo()">
<tr data-ng-repeat="row in displayed" st-select-row="row" st-select-mode="single" data-ng-class="{'selected':$index == selectedRow}" data-ng-click="setClickedRow($index)">
<td data-ng-click="$parent.selData(row);">{{$index}}</td>
<td data-ng-click="$parent.selData(row);">{{row.asd}}</td>
<td data-ng-click="$parent.selData(row);">{{row.sad}}</td>
<td data-ng-click="$parent.selData(row);">{{row.dsa}}</td>
<td data-ng-click="$parent.selData(row);">{{row.das}}</td>
<td data-ng-click="$parent.selData(row);">{{row.sda}}</td>
<td data-ng-click="$parent.selData(row);">{{row.ads}}</td>
<td data-ng-click="$parent.selData(row);">{{row.etc}}</td>
</tr>
</tbody>
</table>
<div>

Answer 2

You can use ternary operator in expressions. Just give a try
<tr data-ng-repeat="row in displayed" st-select-row="row" st-select-mode="single" data-ng-click="selectedRow = $index" data-ng-class="$index == selectedRow ? 'selected' : ' '" >
I think your ng-click works later and you're applying class first.