Search code examples
angularjssweetalert2

Item deleted is shown even after the deletion


I use sweetalert 2 for deletion, but when I click the delete icon, sweetalert would appear and when I confirm deletion in an item, it won't delete, but after that,the next time I click the delete icon in the same item the item gets deleted and then the sweetalert appears.
P.S. the first time deletes the item from the array

$scope.remove = function (i) {
    // let r = confirm("Are you sure? Do you need to delete the keyword?");
    //  let r = false;
    swal({
        title: "Are you sure?",
        text: "Once aaa deleted, you will not be able to recover this imaginary file!",
        icon: "warning",
        buttons: true,
        dangerMode: true,
        showLoaderOnConfirm: true
    })
    .then((willDelete) => {
        if (willDelete) {
            // console.log("r2success" + r);
            // console.log("r1success" + r);
            // r = true;
            $scope.taggingRows.splice(i, 1);
            // console.log(" i " + i + " & " + "r " + r);
            $scope.taggingRowsAct.splice(i, 0);
            swal("Your file has been deleted!", {
                icon: "success",
            })

        } else {
            swal("Your file was not deleted!");
            console.log("r1canceled" + r);
            r = false;
            console.log("r2canceled" + r);
        }
    });

Solution

  • When you are using a 3rd party-non angular library, then you need to use $scope.$apply() to update scope bindings:

    .then((willDelete) => {
            if (willDelete) {
                $scope.taggingRows.splice(i, 1);
                // console.log(" i " + i + " & " + "r " + r);
                $scope.taggingRowsAct.splice(i, 0);
    
                $scope.$apply();  
    
                swal("Your file has been deleted!", {
                    icon: "success",
                })
    
            } else {
                swal("Your file was not deleted!");
                console.log("r1canceled" + r);
                r = false;
                console.log("r2canceled" + r);
            }
        });
    

    Read more: https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$apply