jazzoria jazzoria - 10 months ago 46
AngularJS Question

How to delete the item from the list

Im creating an app using ionic and angularjs. In the app developing I have used swipe option from the ionic to delete the specific coupon from the main-list. The problem I problem face here is, Im only able to delete the description of the selected coupon, but not able to delete/remove the coupon from the main-list. Also I have use

where I have declared my
json array
. I have declare a
into which the selected coupon and its details are being pushed, in-order to display the description of each selected coupons. I'm going wrong somewhere in the code please help me to get it right. Thank you.


<ion-item ng-click="select_item(coupons)" ng-repeat="coupons in couponList" ng-model="coupons.selected">
{{coupons.CouponTitle}} <br>
<ion-option-button ng-click="editCoupons(coupons)">Edit</ion-option-button>
<ion-option-button class="button-assertive" ng-click="deleteSelected(coupons)">Delete</ion-option-button>
<div style="text-align:center">
<div ng-repeat="item in items">
Coupon offer: {{item.data.description}}<br> Valid From: {{item.data.Fromldate}}
<br> Valid Till: {{item.data.Todate}} </div>


$scope.items = [];
$rootScope.couponList = [{ CouponTitle: "Purchase worth $100", data: {description: "$50 off", Fromldate: "2016-09-09", Todate: "2016-09-18"}},
{CouponTitle: "Purchase worth $300", data:{description: "$75 off", Fromldate: "2016-11-09", Todate: "2016-10-19"}},
{ CouponTitle: "Purchase worth $500",data:{description: "$95 off", Fromldate: "2016-09-10", Todate: "2016-09-30"}}];

$scope.select_item = function (key) {


$scope.deleteSelected = function () {

Answer Source

As suggested in one answer you can use the $index mechanism to remove an object from an array.

You have to delete both from items array and rootscope array


<ion-option-button class="button-assertive" ng-click="deleteSelected($index,coupons)">Delete</ion-option-button>


 $scope.deleteSelected = function (index,coupons) {

     var to_delete = $scope.items.find(find_data)

     function find_data(items) { 
        return items.CouponTitle === coupons.CouponTitle;

     var index = $scope.items.indexOf(to_delete);



HEre is a partial implemented fiddle

You should delete both the items array and also, couponList to remove in ng-repeat