How to close ion-item-sliding when lost focus?

Ionic Framework
1

I want to close the ion-item-sliding when user swipe on a item to see the options but then focus on some other element for example - click on a button, or want to input in a text input. So basically if user lost the focus or click/touch somewhere else after swipe to open the ion-item-sliding it should get close.

2

Hello;
Basically you can use ng-if="" to show and hide an element. Please check my code that I use. You can format it as you want.
HTML


<div class="row" style="background-color: #fff;padding: 0px;">

            <div class="col" style="display: contents;">

                <button style="background-color: #fff; color:darkred" ng-click="slaytsec()" class="button icon ion-bookmark"></button>

                <label style="width: 100%!important;" class="item item-input">

                    <i class="icon ion-search placeholder-icon"></i>

            <input id="arama" ng-change="gorselgizle()" ng-model="arama" type="text" placeholder="{{'arama' | translate}}">

            </label>

                <button ng-click="arama=''" style="background-color: transparent;border-color:transparent"> <i

                        style="padding-right: 10px;" class="icon ion-android-close placeholder-icon"></i></button>

                <button style="background-color: #fff; color:darkred" ng-click="kategorisec()" class="button icon ion-grid"></button>

            </div>

        </div>

        <div class="item item-divider" style="text-align: center;background-color:brown;color:#fff;" ng-click="kampanyalist()">

            <i class="fa fa-star" aria-hidden="true"></i> {{'kampanyalar' | translate}}

        </div>

        <div id="slider" ng-if="sliderdurum">

            <ion-slide-box auto-play="true" does-continue="true" on-slide-changed="slideHasChanged($index)">

                <ion-slide ng-repeat="slider in sliderlar">

                    <div class="box">

                        <img ng-src="{{fotoUrl(slider.PhotoUrl)}}" />

                    </div>

                </ion-slide>

            </ion-slide-box>

        </div>

JS:


   $scope.sliderdurum = false;
    $scope.kategoridurum = true;
    $scope.aramagoster = true;
  $scope.fotoUrl = function(adres) {
        var photourl = resimLinki + "/" + adres;
        return photourl;
    }

    $scope.slaytsec = function() {
        $scope.sliderdurum = !$scope.sliderdurum;

    }

    $scope.kategorisec = function() {

        $scope.kategoridurum = !$scope.kategoridurum;
    }

    $scope.gorselgizle = function() {
        $scope.kategoridurum = false;
        $scope.sliderdurum = false;
    }
4

Hey, thanks for your answer but unfortunately this doesn’t answer the question. You might have misunderstood the question.

5

Hi!
do you have solve?