AngularJS Prompt Box Confirmation

Question

AngularJS Prompt Box Confirmation

Is there a way to implement a confirmation dialog box for the delete button in angularjs?

<button class="btn btn-sm btn-danger" ng-click="removeUser($index)">Delete</button>

Here's an example of how you can achieve this.

<span><a class="button" onclick="return confirm('Are you sure to delete this record ?')" href="delete/{{ item.id }}">Delete</span>

Update

This is my current approach:

    function removeUser(index) {
      var isConfirmed = confirm("Are you sure to delete this record ?");
      if(isConfirmed){
        vm.users.splice(index, 1);
      }else{
        return false;
      }
    };

javascript angularjs confirm-dialog

Answer 1

Answer №1

Below are the code snippets provided:

Here is how your HTML code should look like:

<button class="btn btn-sm btn-danger" ng-confirm-click="Are you sure to delete this record ?" confirmed-click="removeUser($index)">Delete</button>

Make sure to add this directive in your custom angularjs file:

app.directive('ngConfirmClick', [
    function(){
        return {
            link: function (scope, element, attr) {
                var msg = attr.ngConfirmClick || "Are you sure?";
                var clickAction = attr.confirmedClick;
                element.bind('click',function (event) {
                    if ( window.confirm(msg) ) {
                        scope.$eval(clickAction)
                    }
                });
            }
        };
}])

Modify your angular scope accordingly based on the delete function mentioned above:

$scope.removeUser = function(index) {
    vm.users.splice(index, 1);
}

Answer 2

Below are the code snippets provided:

Here is how your HTML code should look like:

<button class="btn btn-sm btn-danger" ng-confirm-click="Are you sure to delete this record ?" confirmed-click="removeUser($index)">Delete</button>

Make sure to add this directive in your custom angularjs file:

app.directive('ngConfirmClick', [
    function(){
        return {
            link: function (scope, element, attr) {
                var msg = attr.ngConfirmClick || "Are you sure?";
                var clickAction = attr.confirmedClick;
                element.bind('click',function (event) {
                    if ( window.confirm(msg) ) {
                        scope.$eval(clickAction)
                    }
                });
            }
        };
}])

Modify your angular scope accordingly based on the delete function mentioned above:

$scope.removeUser = function(index) {
    vm.users.splice(index, 1);
}

Answer 3

Answer №2

$scope.deleteUser = function (index) {
 if (confirm("Are you sure you want to delete this user?")) {
    alert("User deleted successfully");
    $window.location.href = 'delete/' + index;
 }
}

Link to JSFiddle for deleteUser function

Answer 4

$scope.deleteUser = function (index) {
 if (confirm("Are you sure you want to delete this user?")) {
    alert("User deleted successfully");
    $window.location.href = 'delete/' + index;
 }
}

Link to JSFiddle for deleteUser function

Answer 5

Answer №3

To enhance the functionality of your app, consider separating the message component from the delete action component. By doing so, you can easily reuse the confirm feature in various sections of your application. I implement this using a directive as shown below:

angular.module('myModule').directive("ngConfirmClick", [
  function() {
   return {
     priority: -1,
      restrict: "A",
      link: function(scope, element, attrs) {
        element.bind("click", function(e) {
          var message;
          message = attrs.ngConfirmClick;
          if (message && !confirm(message)) {
           e.stopImmediatePropagation();
           e.preventDefault();
          }
        });
      }
    };
  }
]);

Next, define your controller function that contains the delete action:

$scope.removeUser(index) {
  //perform necessary actions
}

In the View section, utilize ng-click as follows:

<span><a class="button" ng-confirm-click="Are you sure?" ng-click="removeUser(item.id}}">Delete</span>

I hope this explanation proves beneficial for your project.

Answer 6

To enhance the functionality of your app, consider separating the message component from the delete action component. By doing so, you can easily reuse the confirm feature in various sections of your application. I implement this using a directive as shown below:

angular.module('myModule').directive("ngConfirmClick", [
  function() {
   return {
     priority: -1,
      restrict: "A",
      link: function(scope, element, attrs) {
        element.bind("click", function(e) {
          var message;
          message = attrs.ngConfirmClick;
          if (message && !confirm(message)) {
           e.stopImmediatePropagation();
           e.preventDefault();
          }
        });
      }
    };
  }
]);

Next, define your controller function that contains the delete action:

$scope.removeUser(index) {
  //perform necessary actions
}

In the View section, utilize ng-click as follows:

<span><a class="button" ng-confirm-click="Are you sure?" ng-click="removeUser(item.id}}">Delete</span>

I hope this explanation proves beneficial for your project.

Answer 7

Answer №4

Check out this plunker for a solution: http://plnkr.co/edit/xJJFxjYeeHmDixAYPu4c?p=preview Implementing a directive for the dialog functionality is recommended.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $window) {

  $scope.deleteRecord = function(id) {
    $window.location.href = 'delete/'+ id;
  }
});

app.directive('ngConfirmClick', [
   function(){
       return {
           link: function (scope, element, attr) {
               var message = attr.ngConfirmClick || "Are you sure?";
               var action = attr.confirmedClick;
               element.bind('click',function (event) {
                   if ( window.confirm(message) ) {
                       scope.$eval(action)
                   }
               });
           }
       };
}])

Answer 8

Check out this plunker for a solution: http://plnkr.co/edit/xJJFxjYeeHmDixAYPu4c?p=preview Implementing a directive for the dialog functionality is recommended.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $window) {

  $scope.deleteRecord = function(id) {
    $window.location.href = 'delete/'+ id;
  }
});

app.directive('ngConfirmClick', [
   function(){
       return {
           link: function (scope, element, attr) {
               var message = attr.ngConfirmClick || "Are you sure?";
               var action = attr.confirmedClick;
               element.bind('click',function (event) {
                   if ( window.confirm(message) ) {
                       scope.$eval(action)
                   }
               });
           }
       };
}])

AngularJS Prompt Box Confirmation

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Interacting div elements with jQuery's dynamic content

Tips for fixing connection issues when trying to connect to MongoDB on AWS Cloud9

Troubleshooting Multer to fix image payload issues in a Node.js and React.js application

how to modify attributes of the :before pseudo-element using jQuery

What is the process for fetching the chosen outcome from a subsequent webpage using HTML?

Troubleshooting an AngularJS and Express routing problem

Is there a way for me to choose a single file while executing the migrate-mongo up command?

Tips for fetching data from a database using AJAX when the values of two drop-down lists are involved

Tampermonkey only allows jQuery Click to execute once within a for loop

Acquiring data from an API response in JSON format using JavaScript

VueJS / v-html is displaying a blank page (Bokeh-html)

What is the best way to bind the value of total when working with forms and the bind method?

Just starting out with AngularJS, running into a problem with ngResource

Accessing the text content of the clicked element using vanilla JavaScript

Performing a bulk create operation with Sequelize using an array

Tips for adding a gradient to your design instead of a plain solid color

Conceal the navbar during the process of the ajax loader loading

Developing tabbed sections in XSLT

Discovering if a value has been entered into an input field in AngularJS can be achieved by verifying its availability

Dependency management in ReactJS components