highlight table row using angularjs - angularjs

Question

how to highlight a table row using angularjs. i tried in the following way but it is highlighting all rows.
I have a table in the following way,
<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

Is this what you are looking for ? I had to guess some mock data and also the selection behavior.
Feel free to ask for more details if this solution suites you well.
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>

Answer 2

<div ng-app="myApp">
<div ng-controller="startCtrl">
<table>
<tr>
<th>header1</th>
<th>header2</th>
</tr>
<tbody data-ng-repeat="transaction in transactionsgroup">
<tr ng-class="{active:$index==selectedRow}" data-ng-click="rowHighilited($index)" data-ng-repeat="txns in transaction.transactions">
<td>{{txns.id}}</td>
<td>{{txns.trasactionName}}</td>
</tr>
</tbody>
</table>
</div>
</div>
Your Controller.
var app=angular.module("myApp",[]);
app.controller("startCtrl",function($scope){
$scope.transactionsgroup=[
{id:1,
transactions:
[{id:1,trasactionName:"a"},
{id:2,trasactionName:"b"},
{id:3,trasactionName:"c"}
]}
];
$scope.rowHighilited=function(row)
{
$scope.selectedRow = row;
}
});
Your .css
.active{
background:yellow;
border:1px solid;
}
Working Fiddle Link
http://jsfiddle.net/Lk4me2xp/1/
This is my custom easy solution.

Answer 3

i tried in the following way but it is highlighting all rows
It's because you are setting common scope property which is shared by all rows. You should set selectedRow in the scope of the individual clicked row. You can refer row child scope with this inside ngClick:
$scope.rowHighilited = function(row) {
this.selectedRow = true;
// or if you also want to unselect on the second click
// this.selectedRow = !this.selectedRow;
};
and then:
data-ng-class='{selected: txns.selectedRow}'