AngularJS ng-click stopPropagation


I have a click Event on a table row and in this row there is also a delete Button with a click Event. When i click the delete button the click Event on the row is also fired.

Here is my code.

  <tr ng-repeat="user in users" class="repeat-animation" ng-click="showUser(user, $index)">
    <td><button class="btn red btn-sm" ng-click="deleteUser(, $index)">Delete</button></td>

How can I prevent that the showUser Event is fired when i click the delete Button in the table cell?


ngClick directive (as well as all other event directives) creates $event variable which is available on same scope. This variable is a reference to JS event object and can be used to call stopPropagation():

  <tr ng-repeat="user in users" ng-click="showUser(user)">
      <button class="btn" ng-click="deleteUser(, $index); $event.stopPropagation();">


Answered By – Stewie

Answer Checked By – Gilberto Lyons (AngularFixing Admin)

Leave a Reply

Your email address will not be published.