javascript - AngularJS ng-click stopPropagation

Question

テーブル行にクリック イベントがあり、この行にはクリック イベントのある削除ボタンもあります。削除ボタンをクリックすると、行のクリックイベントも発生します。

これが私のコードです。

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

showUserテーブルセルの削除ボタンをクリックしたときにイベントが発生しないようにするにはどうすればよいですか?

Answer 1

ngClick ディレクティブ (および他のすべてのイベント ディレクティブ) は$event、同じスコープで使用できる変数を作成します。この変数は JSeventオブジェクトへの参照であり、次の呼び出しに使用できます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

Answer 2

<ul class="col col-double clearfix">
 <li class="col__item" ng-repeat="location in searchLocations">
   <label>
    <input type="checkbox" ng-click="onLocationSelectionClicked($event)" checklist-model="selectedAuctions.locations" checklist-value="location.code" checklist-change="auctionSelectionChanged()" id="{{location.code}}"> {{location.displayName}}
   </label>



$scope.onLocationSelectionClicked = function($event) {
      if($scope.limitSelectionCountTo &&         $scope.selectedAuctions.locations.length == $scope.limitSelectionCountTo) {
         $event.currentTarget.checked=false;
      }
   };