captainrad captainrad - 5 months ago 29
AngularJS Question

setting ng-href in <tr> elements

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>

Answer

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