confirm dialog if checkbox is checked or unchecked in angularjs with ng-click event

display confirm dialog if checkbox is checked or unchecked in angularjs with ng-click event

This is used to display the confirm dialog box if the check-box is checked or unchecked in angularjs with ng-click event fired.

The Table of context

1. HTML code sample
2. AngularJs code sample
3. Click for Live demo code sample

HTML code sample
?
1
2
3
4
5
6
7
<div ng-app="chkbApp">
    <div ng-controller="checkboxCtrl">
          <input type="checkbox" ng-model="IsAccepted" name="chkb_Checked" ng-click="IsChked($event, IsAccepted)">
    </div>
</div>
<div ng-app="chkbApp">
    <div ng-controller="checkboxCtrl">
          <input type="checkbox" ng-model="IsAccepted" name="chkb_Checked" ng-click="IsChked($event, IsAccepted)">
    </div> 
</div>
AngularJs code sample
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
var app = angular.module('chkbApp', []);
app.controller('checkboxCtrl', function ($scope) {
//This is is used to call after clicked and un-clicked of checkbox and pass the click event also.
$scope.IsChked = function ($event, accept) {
    if ($event !== undefined) {
        var checkbox = $event.target;
        if (checkbox.checked) {
            var ok = window.confirm('Are you sure to Accept this?');
            if (ok) {
                //TODO: if click on OK button.
            } else {
               //TODO: if click on cancel button.
            }
        }
    }
};
});
var app = angular.module('chkbApp', []);

app.controller('checkboxCtrl', function ($scope) {

//This is is used to call after clicked and un-clicked of checkbox and pass the click event also.
$scope.IsChked = function ($event, accept) {
    if ($event !== undefined) {
        var checkbox = $event.target;
        if (checkbox.checked) {
            var ok = window.confirm('Are you sure to Accept this?');
            if (ok) {
                //TODO: if click on OK button.
            } else {
               //TODO: if click on cancel button.
            }
        }
    }
};
});
Full code with live example
?
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
<!DOCTYPE html>
<html ng-app="chkbApp">
<head>
  <script>
    var app = angular.module('chkbApp', []);
    app.controller('checkboxCtrl', function($scope) {
      //This is is used to call after clicked and un-clicked of checkbox and pass the click event also.
      $scope.IsChked = function($event, accept) {
        if ($event !== undefined) {
          var checkbox = $event.target;
          if (checkbox.checked) {
            var ok = window.confirm('Are you sure to Accept this?');
            if (ok) {
              //TODO: if click on OK button.
            } else {
              //TODO: if click on cancel button.
            }
          }
        }
      };
    });
  </script>
</head>
<body>
  <div>
    <div ng-controller="checkboxCtrl">
      Valid User?
      <input type="checkbox" ng-model="IsAccepted" name="chkb_Checked" ng-click="IsChked($event, IsAccepted)">
    </div>
  </div>
</body>
</html>
<!DOCTYPE html>
<html ng-app="chkbApp">

<head>
  <script src="https://code.angularjs.org/1.3.0-rc.2/angular.js"></script>
  <script>
    var app = angular.module('chkbApp', []);

    app.controller('checkboxCtrl', function($scope) {
      //This is is used to call after clicked and un-clicked of checkbox and pass the click event also.
      $scope.IsChked = function($event, accept) {
        if ($event !== undefined) {
          var checkbox = $event.target;
          if (checkbox.checked) {
            var ok = window.confirm('Are you sure to Accept this?');
            if (ok) {
              //TODO: if click on OK button.
            } else {
              //TODO: if click on cancel button.
            }
          }
        }
      };
    });
  </script>
</head>

<body>
  <div>
    <div ng-controller="checkboxCtrl">
      Valid User?
      <input type="checkbox" ng-model="IsAccepted" name="chkb_Checked" ng-click="IsChked($event, IsAccepted)">
    </div>
  </div>
</body>

</html>
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