Search code examples
angularjsionic-frameworkswipe

Ionic list delete, show options

When I delete an element as a swipe list, the swipe options stay open, I want this element to be deleted and close;

<ion-item>
    <p><h2>{{detail.descripcion}}</h2></p>
    <p>{{detail.observacion}} </p> 
    <p>{{detail.total_base}} + {{detail.total_iva}} = {{detail.total_pagar}}</p>
    <span class="badge badge-dark">{{detail.total_items}}</span> 
    <ion-option-button class="button-balanced" ng-click="sust_item(detail,1)">
        -1
    </ion-option-button>
    <ion-option-button class="button-balanced" ng-click="add_item(detail,1)">
        +1
    </ion-option-button>

</ion-item>

code for delete:

$scope.del_order = function(item, index) {
    $scope.orders_list.splice(index, 1);
    //$scope.confirmDelete(item, index);
};



Delete item and swipe option stay open:

Solution

  • Check this example which use $ionicListDelegate.closeOptionButtons() to close option buttons after some operation (share and delete, not for edit):

    angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope, $ionicListDelegate) {
  
  $scope.data = {
    showDelete: false
  };
  
  $scope.edit = function(item) {
    alert('Edit Item: ' + item.id);
  };
  $scope.share = function(item) {
    alert('Share Item: ' + item.id);
    $ionicListDelegate.closeOptionButtons();  // this closes swipe option buttons after alert
  };
  
  $scope.moveItem = function(item, fromIndex, toIndex) {
    $scope.items.splice(fromIndex, 1);
    $scope.items.splice(toIndex, 0, item);
  };

  $scope.delItem = function(item) {
    $scope.items.splice($scope.items.indexOf(item), 1);
    $ionicListDelegate.closeOptionButtons();
  };

  
  $scope.onItemDelete = function(item) {
    $scope.items.splice($scope.items.indexOf(item), 1);
    $scope.data.showDelete = false;  // this closes delete-option buttons after delete
  };
  
  $scope.items = [];
  for (var i=0; i<30; i++) {
    $scope.items.push({ id: i});
  }
  
});
    <html ng-app="ionicApp">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Ionic List Directive</title>
   
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
  </head>

  <body ng-controller="MyCtrl">
    
    <ion-header-bar class="bar-positive">
      <div class="buttons">
        <button class="button button-icon icon ion-ios-minus-outline"
          ng-click="data.showDelete = !data.showDelete; data.showReorder = false"></button>
      </div>
      <h1 class="title">Ionic Delete/Option Buttons</h1>
      <div class="buttons">
        <button class="button" ng-click="data.showDelete = false; data.showReorder = !data.showReorder">
            Reorder
        </button>
      </div>
    </ion-header-bar>

    <ion-content>

      <ion-list show-delete="data.showDelete" show-reorder="data.showReorder">

        <ion-item ng-repeat="item in items" 
                  item="item"
                  href="#/item/{{item.id}}" class="item-remove-animate">
          Item {{ item.id }}
          <ion-delete-button class="ion-minus-circled" 
                             ng-click="onItemDelete(item)">
          </ion-delete-button>
          <ion-option-button class="button-assertive"
                             ng-click="edit(item)">
            Edit
          </ion-option-button>
          <ion-option-button class="button-calm"
                             ng-click="share(item)">
            Share
          </ion-option-button>
          <ion-option-button class="button-positive"
                             ng-click="delItem(item)">
            Del
          </ion-option-button>
          <ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button>
        </ion-item>

      </ion-list>

    </ion-content>
      
  </body>
</html>