css - 更改在angularjs中未选中的已选中行的背景颜色

Question

我有一个从 ng-repeat 生成的表格。每一行都有一个复选框。我想要选中的行更改它们的背景颜色。我正在尝试使用 ng-class 但没有帮助，只要我选中一个复选框，所有行的背景都会更改。我明白错误是什么，但不知道如何解决。

这是我的 table

<table >
        <tr>
        <th>Select</th>
        <th>Job List</th>
        <th>Next Firing</th>
        </tr>
         <tr ng-repeat="x in jobs" ng-class-odd="'odd'" ng-class-even="'even'" ng-class="myclass">
            <td style="width: 247px; "><input type="checkbox" ng-model="x.checked" ng-click=countChecked($index)></td>
            <td style="width: 247px; ">{{ x.Name }}</td>
            <td style="width: 247px; ">{{ x.ID }}</td>
        </tr>
        </table>

这是我的 Controller

$scope.countChecked = function(index){
        var count = 0;
        angular.forEach($scope.jobs, function(job){
            if (job.checked) {
                count++;
                $scope.myclass='selected';

            }
        });
    return count;
    }

我需要“计数”用于不同的目的，它工作正常。

这是选中的css

.selected{
    background-color: #DEB887;

    }

Answer 1

您可以使用 ngClass像这样选择 job 时给它一个特定类的指令:

<ANY ... ng-class="{ 'selected': x.checked }">
    ...
</ANY>