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

debugcn 发表于 Dev

linyuanxie

我有一个ng-repeate表。我需要为每个选定的行切换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;
         }
    }

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

刚95

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。