CODEWITHSUNDEEP
javascriptangularjscheckboxangularjs-nvd3-directives
Bellicose Agnostic
Bellicose Agnostic

Reputation: 76

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

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.

Upvotes: 0

Views: 2171

Answers (3)

sneha shah
sneha shah

Reputation: 75

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>

Upvotes: 1

Bellicose Agnostic
Bellicose Agnostic

Reputation: 76

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;
        }
      }

    });

  }
};

Upvotes: 1

karaxuna
karaxuna

Reputation: 26940

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;
        });
    }
}

Upvotes: 0

Related Questions