2016-01-20 14 views
9

Quando elimino un elemento come elenco di scorrimento, le opzioni di scorrimento rimangono aperte, voglio che questo elemento sia cancellato e chiuso;Elimina elenco ionico, mostra opzioni

codice
<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> 

per cancellare:

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



opzione Elimina voce e scorrere rimangono aperti:

risposta

16

Controllare questo esempio che utilizzano $ionicListDelegate.closeOptionButtons() per chiudere pulsanti di opzione dopo qualche operazione (condividere ed eliminare, non per la modifica):

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>

+2

** Molto buona una risposta veloce !!! ** @beaver –

+1

Se apprezzate la risposta, vi prego di accettare e voto ... :) – beaver

+1

Il suo detto un bisogno 15 punti per voti, perché sono troppo nuovo, fammi ottenere 15 e sicuramente voterò una risposta. –

Problemi correlati