angularjs - 使用angularjs突出显示表格行

Question

如何使用 angularjs 突出显示表格行。我尝试了以下方式，但它突出显示了所有行。

我有一个表，如下所示，

<table>
<tr>
<th>header1</th>
<th>header2</th>
</tr>
<tbody data-ng-repeat="transaction in transactionsgroup">
  <tr data-ng-click="rowHighilited($index)" data-ng-repeat="txns in transaction.transactions" data-ng-class='{selected: $index==selectedRow}'>
<td>xxxxxx</td>
<td>xxxxxx</td>

</tr>
</tbody>
</table>

Controller ，

$scope.rowHighilited = function(row){
      $scope.selectedRow = row; 
  };

Answer 1

这是您要找的吗？我不得不猜测一些模拟数据以及选择行为。

如果此解决方案适合您，请随时询问更多详细信息。

function TestCtrl($scope){
  
  $scope.rowHighilited = function(group, row){
    $scope.selectedGroup=  group;
    $scope.selectedRow = row; 
  };
  
  $scope.transactionsGroups=[
    
    {transactions:['test1','test2','test3']},
    {transactions:['test1','test2']},
    {transactions:['test1','test2']},
    
  ]
}

.selected{
  background:black;
  color:white;
}

/* The following just makes the tbody tags spaced up,
see http://stackoverflow.com/questions/294885/how-to-put-spacing-between-tbody-elements for details */

table {
  border-collapse: collapse;
  width:100%;
  max-width:300px;
}

table tbody {
  border-top: 30px solid white;
}

td,th{width:50%; text-align:center;}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="TestCtrl">

<pre ng-bind="{{transactionsgroups}}"></pre>

<table>
<tr>
<th>header1</th>
<th>header2</th>
</tr>
<tbody 
       ng-repeat="transactionGroup in transactionsGroups"
       ng-init="groupIndex=$index"
       >
  <tr 
      ng-repeat="transaction in transactionGroup.transactions"
      ng-init="transactionIndex=$index"
      ng-click="rowHighilited(groupIndex, transactionIndex)"
      ng-class="groupIndex==selectedGroup && transactionIndex==selectedRow?'selected':''">
    <td>transaction:</td>
    <td>{{transaction}}</td>
  </tr>
</tbody>
  
</table>
  
</div>