我正在使用AngularJS,并且在表格行中我希望整行都是可点击的,但我在最后一列中也有一个可点击的链接。就像这样:
<tr x-ng-click="goSomehere()">
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>
<a href="" x-ng-click="openEditor()">
edit
</a>
</td>
</tr>
现在我真的希望不必在所有TD元素中重复x-ng-click=“goSomewhere()”(因为它超过30个),但我还希望最后一列中的链接可以打开编辑器。有没有一种简单的方法可以从TR元素中给出的x-ng-click属性中排除最后一列?
1条答案
按热度按时间vnzz0bqm1#
是的,有一种方法可以实现这一点,而无需在每个元素中重复
x-ng-click
指令。你可以在AngularJS中使用事件委托来处理整个行上的click事件,然后根据被点击的元素有条件地执行不同的操作。下面是一个如何实现它的示例:
1.向
<tr>
元素添加单击事件处理程序:1.在控制器或指令中,定义
handleRowClick
函数:javascript在
handleRowClick
函数中,我们检查单击的元素是否是<a>
标记。如果是,我们不执行行单击操作(goSomewhere()
)。相反,我们让openEditor()
函数处理链接单击操作。我们还在openEditor
函数中使用event.stopPropagation()
来防止行单击事件冒泡并触发行单击操作。使用这种方法,您只需要在
<tr>
元素上定义一次click事件,它将处理行内的行单击和链接单击。