☰

AngularJS ng-click stopPropagation 質問する

tag-icon • tag-icon javascript angularjs angularjs-ng-click
AngularJS ng-click stopPropagation 質問する

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

これが私のコードです。

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

ベストアンサー1

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

おすすめ記事