離子列表刪除，顯示選項

當我刪除一個元素作爲滑動列表時，滑動選項保持打開狀態，我希望此元素被刪除並關閉;對於刪除離子列表刪除，顯示選項

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

代碼：

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

刪除項目和刷卡選項保持開放：

來源

2016-01-20 SAMUEL OSPINA

檢查這個例子使用$ionicListDelegate.closeOptionButtons()一些操作後關閉選項按鈕（分享和刪除，不可編輯）：

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>

來源

2016-01-21 08:21:27 beaver

**很好的快速回答！** @beaver –

如果你欣賞的回答，請接受它，並投票... :) – beaver

其表示需要15分投票，導致我太新，讓我得到15，並確定我會投票你回答。 –

離子列表刪除，顯示選項

回答

相關問題