angularjs confirmation dialog box

angularjs confirmation dialog box

Hi, I am going to share the code-sample for confirmation dialog box on an ng-click using a custom AngularJs directive. The example code as given below.

Table of Contents

1. HTML 5 code-sample
2. AngularJs controller $scope function i.e. $scope.removeRowIndex
3. AngularJs custom directive code-sample.

 HTML 5 code-sample
?
1
<button confirmed-click="removeRowIndex(col, row)" ng-confirm-box-click="Are you sure want to delete?" class="btn btn-xs btn-default"></button>
<button confirmed-click="removeRowIndex(col, row)" ng-confirm-box-click="Are you sure want to delete?" class="btn btn-xs btn-default"></button>
AngularJs controller $scope function i.e. $scope.removeRowIndex
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
var app = angular.module('mobileApp', ['ngGrid']);
app.controller('getMobileServiceCtrl', function ($scope) {
    $scope.mobiles = null
   
    $scope.removeRowIndex = function (col, row) {
        var index = this.row.rowIndex;     
        $scope.mobileGridView.selectItem(index, false);
        $scope.mobiles.splice(index, 1);
        if (row.entity !== undefined && row.entity !== null) {
            deleteUserFromServer(row.entity);
        }
    };
    function deleteUserFromServer(row) {
        var UID = row.UID;
         
    };
});
var app = angular.module('mobileApp', ['ngGrid']);
app.controller('getMobileServiceCtrl', function ($scope) {
    $scope.mobiles = null;  
  
    $scope.removeRowIndex = function (col, row) {
        var index = this.row.rowIndex;      
        $scope.mobileGridView.selectItem(index, false);
        $scope.mobiles.splice(index, 1);

        if (row.entity !== undefined && row.entity !== null) {
            deleteUserFromServer(row.entity);
        }
    };

    function deleteUserFromServer(row) {
        var UID = row.UID;
        
    };
});
AngularJs custom directive code-sample.
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
app.directive('ngConfirmBoxClick', [
      function () {
          return {
              link: function (scope, element, attr) {
                  var msg = attr.ngConfirmBoxClick || "Are you sure want to delete?";
                  var clickAction = attr.confirmedClick;
                  element.bind('click', function (event) {
                      if (window.confirm(msg)) {
                          scope.$eval(clickAction)
                      }
                  });
              }
          };
      }
]);
app.directive('ngConfirmBoxClick', [
      function () {
          return {
              link: function (scope, element, attr) {
                  var msg = attr.ngConfirmBoxClick || "Are you sure want to delete?";
                  var clickAction = attr.confirmedClick;
                  element.bind('click', function (event) {
                      if (window.confirm(msg)) {
                          scope.$eval(clickAction)
                      }
                  });
              }
          };
      }
]);
Full Example code-sample
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
//HTML 5
<button confirmed-click="removeRowIndex(col, row)" ng-confirm-box-click="Are you sure want to delete?" class="btn btn-xs btn-default"></button>
//AngularJs
var app = angular.module('mobileApp', ['ngGrid']);
app.controller('getMobileServiceCtrl', function ($scope) {
    $scope.mobiles = null
   
    $scope.removeRowIndex = function (col, row) {
        var index = this.row.rowIndex;     
        $scope.mobileGridView.selectItem(index, false);
        $scope.mobiles.splice(index, 1);
        if (row.entity !== undefined && row.entity !== null) {
            deleteUserFromServer(row.entity);
        }
    };
    function deleteUserFromServer(row) {
        var UID = row.UID;
         
    };
});
app.directive('ngConfirmBoxClick', [
      function () {
          return {
              link: function (scope, element, attr) {
                  var msg = attr.ngConfirmBoxClick || "Are you sure want to delete?";
                  var clickAction = attr.confirmedClick;
                  element.bind('click', function (event) {
                      if (window.confirm(msg)) {
                          scope.$eval(clickAction)
                      }
                  });
              }
          };
      }
]);
//HTML 5

<button confirmed-click="removeRowIndex(col, row)" ng-confirm-box-click="Are you sure want to delete?" class="btn btn-xs btn-default"></button>

//AngularJs

var app = angular.module('mobileApp', ['ngGrid']);
app.controller('getMobileServiceCtrl', function ($scope) {
    $scope.mobiles = null;  
  
    $scope.removeRowIndex = function (col, row) {
        var index = this.row.rowIndex;      
        $scope.mobileGridView.selectItem(index, false);
        $scope.mobiles.splice(index, 1);

        if (row.entity !== undefined && row.entity !== null) {
            deleteUserFromServer(row.entity);
        }
    };

    function deleteUserFromServer(row) {
        var UID = row.UID;
        
    };
});

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

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
My Blogs - https://code-sample.com and https://code-sample.xyz
My Book1 - BEST SELLING ANGULAR BOOK (INCLUDING ALL VERSIONS 2, 4, 5, 6, 7)
My Book2 - ANGULAR 2 INTERVIEW QUESTIONS BOOK - Both Books are Available on WorldWide.

www.code-sample.com/. Powered by Blogger.