ionicでは、ng-repeatで配列のデータを繰り返し表示する際、show-deleteを使うと削除ボタンが簡単に作成できます
sample storeの左にある赤いボタンが削除ボタンです。
ng-ifのトラップにはまらないように気をつけよう
ボタンを押すと配列のインデックスが渡されて・・・なんていう内部の話は別の機会にするとして、今回はこの赤いボタンが表示されないトラブルに遭遇したので経緯を書き残します
show-deleteの使い方
show-deleteを表示させるのには下記の通りです。
<button ng-if="settings.delEnable" class="button button-icon icon ion-ios-minus-outline" on-tap="shareData.del=!shareData.del"></button>
削除ボタンを表示させるためのボタン。つまり削除モード切替ボタンです。
１度押すとshareData.delが1になり、もう一度押すと0になる、トグルスイッチのような役割を果たす。ここでは、setttings.delEnableが有効の時に削除モード切替ボタンを表示させるようにしました。
実際に削除ボタンを表示させるのは
<ion-list show-delete="shareData.del" show-reorder="data.showReOrderShare" class="list">
の部分。
詳しい使い方はionic公式サイトを参照して下さい。
show-deleteが動かない
さて、本題はここからなのだが、赤丸の削除ボタンが表示されないのです。色々試行錯誤した結果、どうやらng-ifが邪魔をしていたようです。
<button class="button button-icon icon ion-ios-minus-outline" on-tap="shareData.del=!shareData.del"></button>
ng-ifを削除したら正常に動いた。しかし、これではsettings.delEnableの設定にかかわらず、常に削除モード切替ボタンが表示されたままになってしまいます。
解決策
こうすることで解決しました。
<div ng-show="settings.subscription"> <button class="button button-icon icon ion-ios-minus-outline" on-tap="shareData.del=!shareData.del"></button> </div>
ng-ifの代わりにng-showを使用することで、問題が解決しちゃいました。buttonそのものにng-ifをつけちゃうと、ng-ifの値がバインドされちゃうのかなぁ？釈然とはしないけれど、いずれにせよこれで問題は解決できました。
実際のアプリはこちら
買い物リストをダウンロード
買物メモ・買物TODOリスト〜店メモ 〜 Android
