html - 尝试在行上应用 css 类时出现问题

Question

我有这张表:

<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>

我需要在所选行上应用背景色。在 Controller 中我添加了这个:

$scope.selectedRow = null;
$scope.setClickedRow = function(index){
     $scope.selectedRow = index;
}

它应该可以工作，因为在 data-ng-click 中我将索引发送到方法，但它没有进入方法(或者至少没有打印放置在里面的 console.log())。这是 css 类:

.selected {
    background-color: #67BBED;
}

Answer 1

检查这个 fiddle ，它工作得很好 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>