How to make whole row in table act like hyperlink (open in new tab etc) in ngtable (angularjs)

Question

I'm using AngularJS with ngtable.

Every time when I'm creating a table I put ui-sref on <tr> element like this:

<tr ng-repeat="element in $data" ui-sref="app.some.details.info({id: element.id})">
  <td>{{element.name}}</td>
  <td>{{element.info}}</td>
</tr>

However, this doesn't allow the user to open entry in a new tab, right-click on it to open in a new window, etc (it doesn't act like <a> )

Is there any way that I could make the whole row clickable with the option to open in new tab/window (like in the case)

Answer 1

Yo ! If you want your row content acting like an <a /> element, maybe you can wrap your <td> content with an anchor. Something like this:

<tr ng-repeat="element in $data" ui-sref="app.some.details.info({id: element.id})">
  <td>
    <a href="#" title="...">{{element.name}}</a>
  </td>
  <td>
    <a href="#" title="...">{{element.info}}</a>
  </td>
</tr>

You can also create some custom javascript that will recreate <a /> behaviour. Create click listener for each table row and use window.location.href = ....

Answer 2

You can do it using a function, $state.href and window.open.

Also use a variable to control whether new tab or not:

// <tr ng-repeat="element in $data" ng-click="navigateTo(element.id, false)"> -- Same Tab
<tr ng-repeat="element in $data" ng-click="navigateTo(element.id, true)">
  <td>{{element.name}}</td>
  <td>{{element.info}}</td>
</tr>

...

//In the controller
$scope.navigateTo = function(id, inNewTab){
  if(inNewTab){ // New tab
     var url = $state.href('app.some.details.info', {id: id});
     window.open(url , "_blank")
  } else { // Same tab
     $state.go('app.some.details.info', {id: id});
  }
}