Create a confirmation alert for delete button in Angular using JS

Question

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 several things in javascript with no luck. I am using Angular.

Is this best approach for this?

Also, does anyone know of any examples for this, I have not found any that work.

$(document).ready(function(){
  $("form").validate();
  $(".radius small success button").ConfirmDialog('Are you sure?');
});

javascript
angularjs
confirmation

Answer 1

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>

Answer 2

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.

Answer 3

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

The Markup

<div class="alert alert-block alert-error notification fade in" data-ng-show="displayLocationDeletePopup">
    <h6>Are you sure you want to delete this location?</h6>
    <div class="form-controls-alert">
        <a href="" class="btn" data-ng-click="showDeleteLocationPopup(false)">No</a>
        <a href="" 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

<i class="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            
};