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

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book