require confirmation before updating ng-model or executing ng-change in angularjs checkbox input

Question

I have a checkbox input that when checked sets customer.isCompleted to true or false and saves the customer data through a firebase api using ng-change

input type="checkbox" ng-model="customer.isCompleted" ng-change="sc.data.$save(customer)"

however i want to make sure when customer checks the box, it prompts for confirmation. If users hits OK then, it should check the box, update the ngModel and fire ngChangeotherwise do nothing.(and do this when the box is checked or unchecked). when checked the confirmation box should say message1 and when unchecked it should say message2.

how can I implement this. I'm assuming a directive, but don't know how i'd implement it.

score 1 · Accepted Answer · answered Feb 20 '15 at 07:53

After several trial & error i've figured out the code that works. I've expanded upon the $parsers solution from karaxuna. What I'm doing here is checking the $viewValue & $modelValue, correcting viewValue when cancel button is pressed.

 return {
  restrict: 'A',
  require: 'ngModel',
  link: function(scope, element, attrs, ngModel) {

    var x = false;

    ngModel.$parsers.push(function(val) {
      if (ngModel.$viewValue === true && ngModel.$modelValue === false) {
        if (val && confirm('sure want to check?')) {
          return val;
        } else {
          ngModel.$setViewValue(x);
          ngModel.$render();
          return x;
        }
      }

      if (ngModel.$viewValue === false && ngModel.$modelValue === true) {
        if (!val && confirm('sure want to uncheck?')) {
          return val;
        } else {
          ngModel.$setViewValue(!x);
          ngModel.$render();
          return !x;
        }
      }

    });

  }
};

score 1 · Answer 2 · answered Sep 30 '22 at 10:53

Add this code in ng change function

$scope.ConfirmChange = function () {
      var prevValue = !$scope.Checked;
      var newValue = $scope.Checked;

      if (prevValue) {
        $scope.report.IsMouldApplicable = prevValue;

        SwalAsk("Uncheck", "Are you sure for uncheck?", 'question', true, "Yes, confirm", function () {
          $scope.Checked = newValue;
        }, null, function () {
          $scopeChecked= prevValue;
        });
      } 
    };

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<label class="selectcheckbox ml-3" >
                <input type="checkbox" ng-model="Checked" ng-change="ConfirmChange();" /><i></i>
              </label>

karaxuna · Answer 3 · 2015-02-18T07:08:49.013

0

Easy way:

input type="checkbox" ng-model="customer.isCompleted"
    ng-change="if(confirm('sure?')) sc.data.$save(customer)"

Directive way:

return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attrs, ngModel){
        ngModel.$parsers.push(function(val){
            if(val && confirm('sure want to check?') ||
               !val && confirm('sure want to uncheck?'))
                return val;
        });
    }
}

edited Feb 18 '15 at 07:08

answered Feb 18 '15 at 06:55

karaxuna

26,752
13
82
117

thanks for your response, Here's what's happening, Easy Way Doesn't work. The directive way is working when I press OK, but when I press cancel, it throws the following console error, "Error: Key isCompleted was undefined. Cannot pass undefined in JSON. Use null instead." The view acts as if the checkbox was checked (the model is not changing though) Is there a way it can be setup so that the isCompleted does't become undefined and instead remain in the previous state of 'true' or 'false'? – Bellicose Agnostic Feb 19 '15 at 09:42

require confirmation before updating ng-model or executing ng-change in angularjs checkbox input

3 Answers3