如何使表格中的整行表现得像ngtable(angularjs)中的超链接(在新选项卡中打开等)

Question

我使用的是带有ngtable的AngularJS。

每次创建表时，我都会将ui-sref放在<tr>元素上，如下所示：

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

然而，这不允许用户在新选项卡中打开条目，右键单击它在新窗口中打开，等等(它不像<a>(

有没有什么方法可以让整行都可以点击，并选择在新的选项卡/窗口中打开(就像在这种情况下(

Answer 1

您可以使用函数$state.href和window.open来执行此操作。

还可以使用一个变量来控制是否新建选项卡：

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

Answer 2

Yo！如果您希望您的行内容表现得像<a />元素，也许您可以用锚来包装<td>内容。类似这样的东西：

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

您还可以创建一些自定义javascript来重新创建<a />行为。为每个表行创建点击监听器，并使用window.location.href = ...。