アラフィフSEの日々

九州の片田舎に住む、おっさんSEの技術メモやら思った事を、適当に綴ります

Onsen UIのリストの行タップでのイベント処理

タップすると編集画面に移動する機能に加え、
リスト右にゴミ箱アイコンを表示させて削除の機能を付ける場合、
普通、こんな感じに書きます。

<ons-list>
  <ons-list-item ng-repeat="shop in shops">
    <ons-row ng-click="showDetaiShop($index)">
      <ons-col>
        <span class="list-text">{{shop.SHOP_NAME}}</span>
      </ons-col>
      <ons-col>
        <span class="right-icon" ng-click="deleteShop($index)">
          <ons-icon icon="ion-trash-a"></ons-icon>
        </span>
      </ons-col>
    </ons-row>
  </ons-list-item>
</ons-list>

しかし、このままだとゴミ箱のアイコンをクリックした場合に、
上の「ng-click="showDetaiShop($index)"」まで呼び出されます。

そこで、アイコンクリックのイベントで呼び出す関数の引数にイベントを追加し、

ng-click="deleteShop($index,$event)"

呼び出す関数(deleteShop)で、以下のようにして上のイベントへの伝搬を停止させます。

event.stopPropagation();

これで、上のイベントは呼び出されないのですが、
例えば、バインドされた配列の要素を削除しても、
リスト自体の更新がされなくなってしまいます。
そこで、以下のように「$scope.$apply()」を呼び出しリストを更新します。

ShopList.shops.splice(index, 1);
$scope.$apply();