代码之家 › 专栏 › 技术社区 › EasterBunnyBugSmasher

使行中除一列外的所有列都可单击

angularjs html

EasterBunnyBugSmasher · 技术社区 · 2 年前

我使用的是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 回复 | 直到 2 年前

Angie Florez 2 年前

是的,有一种方法可以在不重复 x-ng-click 每个元素中的指令。您可以在AngularJS中使用事件委派来处理整行的点击事件,然后根据点击的元素有条件地执行不同的操作。

以下是如何实现它的示例:

将单击事件处理程序添加到 <tr> 元素:
在控制器或指令中,定义 handleRowClick 功能: javascript

在 handleRowClick 函数,我们检查单击的元素是否是 <a> 标签如果是,则不执行行单击操作( goSomewhere() )。相反,我们让 openEditor() 函数处理链接单击操作。我们还使用 event.stopPropagation() 在 openEditor 函数,以防止行单击事件冒泡并触发行单击操作。

使用这种方法,您只需要在 <tr> 元素,并且它将处理行中的行单击和链接单击。

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope) {
  $scope.handleRowClick = function(event) {
    var target = event.target;
    var isLinkClicked = target.tagName.toLowerCase() === 'a';

    if (!isLinkClicked) {
      $scope.goSomewhere();
    }
  };

  $scope.goSomewhere = function() {
    alert('Row clicked');
  };

  $scope.openEditor = function(event) {
    event.stopPropagation();
    alert('Edit link clicked');
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<table>
  <tr ng-app="myApp" ng-controller="myCtrl" ng-click="handleRowClick($event)">
    <td>Row 1</td>
    <td>Row 1</td>
    <td>Row 1</td>
    <td>Row 1</td>
    <td>Row 1</td>
    <td>Row 1</td>
    <td><a href="" ng-click="openEditor($event)">edit</a></td>
  </tr>
</table>

推荐文章

learner · 如果超出限制,AngularJS ui select multiple应显示警报

4 年前

Onyx · 外部和内部div都有ng click,当我单击内部div时,两个ng click都会执行。如何预防?

4 年前

Michlut · Angular JS——从表单上传文件,并作为json对象的一部分与其他数据一起发送

4 年前

jieunbi · 按日期排序数组(最新优先)

4 年前

StackoverflowNinja · 当数字框的值在AngularJS中更改时更改下拉列表的值

4 年前

Stradosphere · 如何防止ng bind html添加结束标记?

7 年前

Celestialchippy · 如果事情是真的,如何创建一个“<a>”链接?

7 年前

a4aravind · Angulari如何使用java驱动程序访问元素?

7 年前

Nicoleta Wilskon · DecodeURIComponent不支持%uxxx编码的组件

7 年前

Nishant Florentin · 在AngularJS中发生ng if、ng show等之后,我该如何做一些动作?

7 年前