Question

我有一个ng-repeate表。我需要为每个选定的行设置toggleClass。这是我的代码：

<svg height="400" version="1.1" width="400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="overflow: hidden; position: relative;">
    <desc style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">Created with RaphaÃ«l 2.1.2</desc>
    <defs style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
        <pattern id="1546A235-C4BA-4ED7-A544-C43CE0BA3109" x="0" y="0" patternUnits="userSpaceOnUse" height="1737" width="2880" patternTransform="matrix(1,0,0,1,0,0) translate(24,12)" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
            <image x="0" y="0" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../imgs/screen.png" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);" width="2880" height="1737"></image>
        </pattern>
    </defs>
    <path fill="url(#1546A235-C4BA-4ED7-A544-C43CE0BA3109)" stroke="none" d="M24,48L313,12L342,174L98,280Z" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path>
</svg>

我的JS代码：

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

我想要的是，如果用户选中该复选框，我需要高亮显示整行。但是单独留下其他未经检查的行，只是说是让用户知道这行是被选中的，如果他们取消选中该行，该类就会消失。

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>

Answer 2

在Angular中，您可以使用[ngClass]：

  <tr *ngFor="let expenses in Expensereports" [ngClass]="{'selectedrow': expenses.isDelete}">
   ...
  </tr>

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

2 个答案: