1. ホーム
  2. javascript

[解決済み] AngularJS ng-click stopPropagation

2022-03-22 10:35:13

質問

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

以下は私のコードです。

<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 テーブルのセルで削除ボタンをクリックすると、イベントが発生しますか?

解決方法を教えてください。

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>

プランカー