Angular: How to make whole table row clickable within ng-repeat?

Question

I have a table.

<tbody>
    <tr ng-repeat="star in stars">
        <td>
            <a ng-href="/#/stars/{{star.id}}">{{star.id}}</a>
        </td>
        <td>{{star.name}}</td>
    </tr>
</tbody>

It renders entities. So far the first column is clickable. I want to make the whole table row ( <tr> ) clickable. How can I do it?

Answer 1

You can place ng-click inside of your <tr> and then have a function in your controller that redirects to the correct URL. Like this:

HTML

<tbody>
    <tr ng-repeat="star in stars" ng-click="goToLink(star)">
        <td>{{star.id}}</td>
        <td>{{star.name}}</td>
    </tr>
</tbody>

Controller

$scope.goToLink = function(star) {
  $location.path('#/stars/' + star.id);
};