CODEWITHSUNDEEP
htmlangularjs
quma
quma

Reputation: 5733

AngularJS - HTML Table handling of click events

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?

Upvotes: 0

Views: 775

Answers (3)

Andriy
Andriy

Reputation: 15442

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

Upvotes: 0

Pankaj
Pankaj

Reputation: 966

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
}

Upvotes: 1

Mitul
Mitul

Reputation: 3427

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>">

Upvotes: 0

Related Questions