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

Question

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>{{ item.foo }}</td>
  <td>{{ item.bar }}</td>
</tr>

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?

Check this out! https://stackoverflow.com/questions/20300866/angularjs-ng-click-stoppropagation — Gowthaman, Mar 08 '18 at 15:58

score 0 · Answer 1 · answered Mar 08 '18 at 16:00

0

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.

answered Mar 08 '18 at 16:00

Steve -Cutter- Blades

5,057
2
26
40

Thanks, that helped! – user1438038 Mar 09 '18 at 08:37

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

1 Answers1