angularjs - 如何将 css 类应用于 ng-repeat 中的选定行

Question

我有一个 ng-repeate 表。我需要为每个选定的行切换类。这是我的代码:

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

我的 JS 代码:

$scope.selectedDeleteRow = function(selected){
         if(selected==true){
            $scope.selectDelete=true;
         }else{
            $scope.selectDelete=false;
         }
    }

我想要的是，如果用户选中该复选框，我需要突出显示整行。但保留其他未选中的行，简单地说就是让用户知道该行已被选中，如果他们取消选中该行，该类就会消失。

Answer 1

ng-class="{'selectedrow':expenses.isDelete}" 应该可以。

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>