setting ng-href in <tr> elements

angularjs

Solution

You can use an ng-click (instead of onClick) as Jason suggests as well.

Something like:

HTML

<tr ng-repeat="client in clients" ng-click="showClient(client)">
    <td><a ng-href="#/user/{{client.tagid}}">{{client.firstname}}</a></td>
    <td>{{client.lastname}}</td>
    <td>{{client.inumber}}</td>
</tr>

Controller

$scope.showClient = function(client) {
  $location.path('#/user/' + client.tagid);
};

And styling to make it show as an clickable element (wont work in IE7)

CSS

tr {
  cursor: pointer;
}
// or
[ng-click] {
  cursor: pointer;
}

Problem

The following code makes the client.name an anchor on each client in clients. I am interested in having the entire `<tr>` element be that link however. `ng-href` does not work on the `<tr>` element.. what can I do so that the entire row is a single link instantiated by `ng-href`? ``` <tr ng-repeat="client in clients"> <td><a ng-href="#/user/{{client.tagid}}">{{client.firstname}}</a></td> <td>{{client.lastname}}</td> <td>{{client.inumber}}</td> </tr> ``` What I am looking to do is something like this.. which of course does not work.. ``` <a ng-href="#/user/{{client.tagid}}"> <tr ng-repeat="client in clients"> <td>{{client.firstname}}</td> <td>{{client.lastname}}</td> <td>{{client.inumber}}</td> </tr> </a> ``` OR ``` <tr ng-repeat="client in clients" ng-href="#/user/{{client.tagid}}"> <td>{{client.firstname}}</td> <td>{{client.lastname}}</td> <td>{{client.inumber}}</td> </tr> ```

Original source