AngularJS - 點擊事件的HTML表格處理

我有如下表：AngularJS - 點擊事件的HTML表格處理

<table> 
    <tr data-ng-repeat-start=... data-ng-click="contactGroup.expanded = !contactGroup.expanded"> 
     <td class="myColumn" data-ng-click=...>

當單擊某一行與行擴展和附加信息顯示，該行 - 這工作得很好。在這一行中還有一列（myColumn）可以點擊。如果點擊此列，則該行將展開，並且處理正確的點擊事件。當點擊列myColumn時，是否有辦法阻止該行的擴展？

來源

2016-10-14 quma

可以使用由於事件冒泡而停止它的原因event.stopPropogation()。

雖然單擊列綁定方法;並使用$event防止默認

<table> 
    <tr data-ng-repeat-start=... data-ng-click="contactGroup.expanded = !contactGroup.expanded"> 
     <td class="myColumn" data-ng-click="toggleColumn($event)">

並在控制器：

$scope.toggleColumn = function(e){ 
    e.stopPropogation(); //This would prevent event bubbling from td to tr 
    e.preventDefault(); //This will prevent default action like link load on click of hyperlink 
    //toggle functionality 
}

來源

2016-10-14 05:41:28 Pankaj

您需要的行單擊事件中列綁定，並從該行刪除。

請檢查下面的內容。

<table> 
    <tr data-ng-repeat-start=... data-ng-click=""> 
     <td class="myColumn" data-ng-click="contactGroup.expanded = !contactGroup.expanded; <columnClickEventHandl>">

來源

2016-10-14 05:33:32 Mitul

嘗試

<table> 
    <tr data-ng-repeat-start=... 
     ng-click="!contactGroup.expanded && contactGroup.expanded = !contactGroup.expanded"> 
    <td class="myColumn" ng-click=...>

注意到，在該行的NG單擊的表達式，分配將被執行只有當contactGroup.expanded是false

來源

2016-10-14 05:59:17 Andriy

AngularJS - 點擊事件的HTML表格處理

回答

相關問題