CODEWITHSUNDEEP
javascriptangularjs
Finkelson
Finkelson

Reputation: 3023

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

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?

Upvotes: 3

Views: 18530

Answers (1)

Hunter Turner
Hunter Turner

Reputation: 6894

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

Upvotes: 8

Related Questions