in an Ionic project I made a ion-list ion-items and these ion-option-buttons:

<ion-list>
     <ion-item class="item " ng-repeat="exercise in exercises" on-double-tap="sendToChangeExercise">

            <p><h2>{{exercise.exerciseName}}</h2></p>

            <p ng-repeat="(parameter, value) in exercise.parameters">
             {{parameter}}: {{value}} <span ng-if="exercise.trainingData[parameter].length > 0 "><b><i>Eintrag im Trainingtagebuch: {{exercise.trainingData[parameter]}}</i></b></span>
            </p>
       <ion-option-button class="button button-calm"  ng-click="openModal(exercise.exerciseID)"> Info </ion-option-button>
       <ion-option-button class="button button-energized"  ng-click="openModal(exercise.exerciseID)"> Ändern </ion-option-button>
       
    <ion-option-button class="button button-balanced"  ng-click="didExercise(exercise.exerciseID)" ng-if="!exercise.done"> Done </ion-option-button>
      </ion-item>
</ion-list>

Let's say I swipe left on an item. Then the buttons appear. I click on a button and it does what it's supposed to do. But the ion-item still is in this "swipe left" state. You know what I mean? Now I have to swipe right so that the buttons disappear. Is there anything so that I could automatically let the buttons disappear at the end of the JS functions?

Thanks for help

in an Ionic project I made a ion-list ion-items and these ion-option-buttons:

<ion-list>
     <ion-item class="item " ng-repeat="exercise in exercises" on-double-tap="sendToChangeExercise">

            <p><h2>{{exercise.exerciseName}}</h2></p>

            <p ng-repeat="(parameter, value) in exercise.parameters">
             {{parameter}}: {{value}} <span ng-if="exercise.trainingData[parameter].length > 0 "><b><i>Eintrag im Trainingtagebuch: {{exercise.trainingData[parameter]}}</i></b></span>
            </p>
       <ion-option-button class="button button-calm"  ng-click="openModal(exercise.exerciseID)"> Info </ion-option-button>
       <ion-option-button class="button button-energized"  ng-click="openModal(exercise.exerciseID)"> Ändern </ion-option-button>
       
    <ion-option-button class="button button-balanced"  ng-click="didExercise(exercise.exerciseID)" ng-if="!exercise.done"> Done </ion-option-button>
      </ion-item>
</ion-list>

Let's say I swipe left on an item. Then the buttons appear. I click on a button and it does what it's supposed to do. But the ion-item still is in this "swipe left" state. You know what I mean? Now I have to swipe right so that the buttons disappear. Is there anything so that I could automatically let the buttons disappear at the end of the JS functions?

Thanks for help

• javascript
• angularjs
• ionic-framework

2 Answers 2

Or you could just close all option buttons at the end of your function:

$ionicListDelegate.closeOptionButtons();

You still have to inject $ionicListDelegate into your controller but you don't have to add any handlers.

You have to inject $ionicListDelegate into your controller and call its method closeOptionButtons().

Add to your ion-list attribue delegate-handle. Set its value to, for example, "exercise-list". Add this statement to your click handlers:

$ionicListDelegate.$getByHandle('exercise-list').closeOptionButtons();