如何使用 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;
};
最佳答案
这是您要找的吗？我不得不猜测一些模拟数据以及选择行为。
如果此解决方案适合您，请随时询问更多详细信息。
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>https://stackoverflow.com/questions/28580374/