AngularJS - HTML Table handling of click events

Question

I have the following table:

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

when a row is clicked than the row expands and additional information is shown to this row - this works fine. In this row there is also a column (myColumn) which can be clicked. If this column is clicked than first the row expands and than the proper click event is handled. Is there a way to prevent the expandation of the row when the column myColumn is clicked?

Pankaj · Accepted Answer · 2016-10-14 05:41:28Z

1

The reason it is happening because of event bubbling and to stop it event.stopPropogation() can be used.

While clicking the column bind a method; and use $event to prevent default

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

And in Controller:

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

answered Oct 14, 2016 at 5:41

Pankaj

9668 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mitul · Accepted Answer · 2016-10-14 05:33:32Z

0

You need to bind the row click event in column and remove from the row.

Please check the bellow.

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

answered Oct 14, 2016 at 5:33

Mitul

3,4372 gold badges25 silver badges35 bronze badges

Comments

Andriy · Accepted Answer · 2016-10-14 05:59:17Z

0

try

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

note, that assignment in the row's ng-click's expression will be executed only when contactGroup.expanded is false

answered Oct 14, 2016 at 5:59

Andriy

15.5k4 gold badges49 silver badges53 bronze badges

Collectives™ on Stack Overflow

AngularJS - HTML Table handling of click events

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related