Question

У меня есть таблица ng-repeat. Мне нужно toggleClass для каждой выбранной строки. Вот мой код:

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