Highlighting the selected row in a table using Angularjs

Question

How to write the directive to highlight the selected row in a table,

I have 20 plus tables and i need to write a common function for this table.

I am writing the same code in controllers,

$scope.selectedRow = null;
$scope.rowHighilited = function(row){
  $scope.selectedRow = row;
};
<table>
<tr>
<th>
  first row
</th>
</tr>
<tr data-ng-click="rowHighilited($index)">row1</tr>
</table>

eusoj · Accepted Answer · 2015-02-23 08:00:53Z

1

Try something like this:

JS:

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

HTML :

  <tr ng-repeat="row in rows" ng-click="rowHighilited(row.id)" ng-class="{selected: row.id === selectedRow}">
    <td> ...</td>
  </tr>

You can learn more in the ngClass documentation

answered Feb 23, 2015 at 8:00

eusoj

3743 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

vishnu Over a year ago

I am using similar way, but i need to avoid multiple times repeating the same code

Collectives™ on Stack Overflow

Highlighting the selected row in a table using Angularjs

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related