AngularJS ng-click stopPropagation

angularjs, angularjs-ng-click, javascript

Solution

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()`:

<table>
  <tr ng-repeat="user in users" ng-click="showUser(user)">
    <td>{{user.firstname}}</td>
    <td>{{user.lastname}}</td>
    <td>
      <button class="btn" ng-click="deleteUser(user.id, $index); $event.stopPropagation();">
        Delete
      </button>
    </td>              
  </tr>
</table>

PLUNKER

Problem

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. ``` <tbody> <tr ng-repeat="user in users" class="repeat-animation" ng-click="showUser(user, $index)"> <td>{{user.firstname}}</td> <td>{{user.lastname}}</td> <td>{{user.email}}</td> <td><button class="btn red btn-sm" ng-click="deleteUser(user.id, $index)">Delete</button></td> </tr> </tbody> ``` How can I prevent that the `showUser` Event is fired when i click the delete Button in the table cell?

Original source