У меня есть эта таблица:
<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>
Мне нужно применить цвет фона в выбранной строке. В контроллере я добавил следующее:
$scope.selectedRow = null;
$scope.setClickedRow = function(index){
$scope.selectedRow = index;
}
Он должен работать, поскольку в data-ng-click я отправляю индекс методу, но он не вводил метод (или, по крайней мере, не печатал консоль.log(), помещенную внутри). Здесь класс css:
.selected {
background-color: #67BBED;
}
проверьте эту скрипку, она отлично работает 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="/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>
Вы можете использовать ternary operator
в выражениях. Просто попробуйте
<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' : ' '" >
Я думаю, что ваш ng-click
работает позже, и вы сначала применяете класс.