/ / angularjs confirmation dialog box
angularjs confirmation dialog box

angularjs confirmation dialog box

Edit
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 Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

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