CODEWITHSUNDEEP
angularjs
vishnu
vishnu

Reputation: 4599

highlight table row using angularjs

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

Upvotes: 2

Views: 19303

Answers (3)

Renan Le Caro
Renan Le Caro

Reputation: 365

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>

Upvotes: 4

micronyks
micronyks

Reputation: 55443

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

Upvotes: 3

dfsq
dfsq

Reputation: 193311

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

Upvotes: 1

Related Questions