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

admin管理员组

文章数量:1345110

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?

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?

• javascript
• angularjs

Share Improve this question Follow edited Jan 19, 2018 at 22:27 Hunter Turner 6,9141111 gold badges4242 silver badges5757 bronze badges asked Sep 30, 2016 at 16:57 FinkelsonFinkelson 3,02355 gold badges3333 silver badges5454 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

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

本文标签： javascriptAngular How to make whole table row clickable within ngrepeatStack Overflow