Menu
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:
294
showDelete will be set to true on the initial click of the button, and then set to false on the next click. This will work as a toggle to show/hide the delete buttons. You can give the <ion-delete-button> any icon class you'd like. The delete button for all items will show when clicking on the button in the header.
The Option button is created using an ion-option-button directive. These buttons are showed when the list item is swiped to the left and we can hide it again by swiping the item element to the right.
How do you remove the border on an ion item? May be ion-col, ion-row has some css which is showing the border. Usually in grid systems there is padding in place to create "air" between the blocks. I think style="padding: 0" on your ion-col element should do the trick.
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
