如何使表格中的整行像ngtable（angularjs）中的超链接（在新选项卡等中打开）一样

Posted 2023-05-09

【中文标题】如何使表格中的整行像ngtable（angularjs）中的超链接（在新选项卡等中打开）一样

【英文标题】：How to make whole row in table act like hyperlink (open in new tab etc) in ngtable (angularjs)

【发布时间】：2020-07-26 00:24:30

【问题描述】：

我正在使用 AngularJS 和 ngtable。

每次创建表格时，我都会将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>）

有什么方法可以让我可以通过在新选项卡/窗口中打开的选项使整行可点击（如案例）

【参考方案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);
  

【讨论】：

在这种情况下，它总是会在新标签页中打开，对吧？就像我说过的那样，我希望有一个在新标签中打开的选项，而不是总是在新标签中打开

@lukaszrys 您可以为此添加一个变量。检查编辑

感谢您的回复。虽然这是真的，但我希望它可以由用户控制，而不是由开发人员控制。我想如果有人按住 CTRL 按钮，您的解决方案可以适应在新选项卡中打开，但它仍然不涵盖 <a> 行为

@lukaszrys 您是否尝试将行包装在<a> 标记内并将ui-sref 设置为？

你的意思是把<td>元素放在<a>中吗？是的，我做到了，但它被忽略了。一旦它满足我的问题/疑虑，我就会接受它。

【参考方案2】：

哟！如果您希望您的行内容像 <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 = ...。

【讨论】：

是的，这是一种解决方法，但仍然不是超级优雅的方法