Create A Confirmation Alert For Delete Button In Angular Using Js

I have a form that has a delete button, I would like to create a confirmation box that pop ups when the delete button is clicked. The delete button currently works. I have tried

Solution 1:

Seems like an AngularJS directive is a bit over-the-top for a solution to this. Seems easier just to use straight javascript unless you need some custom functionality to your "confirm()" function.

if (confirm('Are you sure you want to delete this?')) {
     // TODO:  Do something here if the answer is "Ok".
}

Hope this helps, cheers

UPDATE: Actually, with Angular, it would be better to use $window.confirm as this would allow you to test with Karma/Jasmine.

Solution 2:

Here's another approach at this. Basically it's a directive that gets the warning string you want to show, and the function to call if the user accepts. Usage example:

<button type="button" ng-really-message="Are you sure?"
ng-really-click="delete()">Delete</button>

Solution 3:

This is how we're handling our 'confirmation dialogs' (using bootstrap)

The Markup

<divclass="alert alert-block alert-error notification fade in"data-ng-show="displayLocationDeletePopup"><h6>Are you sure you want to delete this location?</h6><divclass="form-controls-alert"><ahref=""class="btn"data-ng-click="showDeleteLocationPopup(false)">No</a><ahref=""class="btn btn-danger"data-ng-click="deleteVendorLocation(locationId)">Yes</a></div></div><!-- end alert -->

Setting model to false on controller load to hide by default with ng-show

$scope.displayLocationDeletePopup = false;

On click on event for show popup, calls a function/passes model in

<iclass="icon-remove"data-ng-click="showDeleteLocationPopup(true, location)"></i>

In the controller:

$scope.showDeleteLocationPopup = function(options, id) {
    if (options === true) {
        $scope.displayLocationDeletePopup = true;
    } else {
        $scope.displayLocationDeletePopup = false;
    }
    $scope.locationId = id;
};

And per the anchors in the html above, can either close the popup or run the function

$scope.deleteVendorLocation = function (storeLocation) {
   // Code to run on confirmation            
};

Solution 4:

var r = confirm("Are you sure you want to Permanently delete this order?");
if (r == true) {
    (OK button click) Write the function here.....
} else {
    (Cancle button click) Write the function here.....
}

Solution 5:

Place Delete option on the right hand side of each record and on clicking the delete option the record should get deleted from the details and JSON array.