CODEWITHSUNDEEP
angularjs
vishnu
vishnu

Reputation: 4599

Highlighting the selected row in a table using Angularjs

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>

Upvotes: 0

Views: 3450

Answers (1)

eusoj
eusoj

Reputation: 374

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

Upvotes: 1

Related Questions