Do not trigger ng-click of parent element when clicking wrapped checkbox [duplicate]


April 2019


155 time


This question already has an answer here:

In AngularJS I have a table row with a ng-click attribute. It is used to bring up a dialog with detailed information about the table item. Furthermore, each table row has a checkbox to select the item for batch processing (e.g. deletion).

<tr ng-repeat="item in items..." href="#detailDialog"
    data-toggle="modal" ng-click="openDialog(...)">
  <td style="text-align: center;">
      <input type="checkbox" ng-model="item.checked" />
  <td>{{ }}</td>
  <td>{{ }}</td>

However, when I click on the checkbox, the ng-click event of the parent table row is also triggered. How do I prevent this from happening? I only want to open the dialog, when the user clicks a table row but not the checkbox.

Is there any option other than binding the ng-click to individual cells?

1 answers


I think you would need an ng-click on your checkbox input that you could then apply $event.stopPropogation to keep the click event from bubbling up to the row. You'll have to test, but I think that may be what's happening.