イオンリストの削除、表示オプション

要素をスワイプリストとして削除すると、スワイプオプションが開いたままになり、この要素を削除して閉じることができます。イオンリストの削除、表示オプション

<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

ITSが必要にのために15ポイントを言いました投票して、私にも新しい15、私はあなたの答えを投票すると確信しても私を聞かせてください。 –

イオンリストの削除、表示オプション

答えて

関連する問題