How to update checkbox (checked or unchecked) from javascript controller to html page after reloading in Angular Js?

Question

I am new in angular js and implementing single page application. I have implemented one checkbox and when I checked checkbox then I want to persist status of the checkbox after reloading. So When I click on the checkbox then storing the status(checked or unchecked) in session through $on($destroy) in Angular js.

I have seen one link Keep checkbox checked after page refresh AngularJS, But this is not working in my case.

I am sharing my sample code.

HTML

 <input type="checkbox" id="mycheckbox" class="checkbox style-0" name="mycheckbox" ng-model="mycheckbox" data-ng-change="confirm()" autocomplete="off"/>

CONTROLLER:

$scope.confirm = function(){
  if($scope.mycheckbox== false)
  {
    sessionStorage.setItem("confirmCheck", $scope.mycheckbox);        
  }
  if($scope.mycheckbox== true){
    sessionStorage.setItem("confirmCheck", $scope.mycheckbox);       
  }
}
if(sessionStorage.confirmCheck == "true"){      
   $('#mycheckbox').prop('checked',true);
}else {
   $('#mycheckbox').prop('checked',false);
}

$scope.$on('$destroy',function(){
  sessionStorage.confirmCheck=sessionStorage.getItem('confirmCheck');
     })

I am able to storing the status of checkbox in session, But I can't able to change status in HTML page.When I navigate to another page and return back to previous page then value is persist in angular controller but not updated in HTML page. Please share your idea. thanks in Advance.

When inspecting the dom, what value does sessionStorage.confirmCheck have? is it True or "true" ? — Mathias Rønnow Nørtoft
– Mathias Rønnow Nørtoft, Commented Jul 23, 2017 at 17:08
But when You clicked the checkbox then in javascript showing true in console .dubugger and persist value in javascript until unchecked from html page. But For unchecked checkbox, I have to checked and then after unchecked for false value. — Varun Sharma
– Varun Sharma, Commented Jul 23, 2017 at 17:10
yeah but does your session store the string "true" or the bool value true? try to change the check to sessionStorage.confirmCheck == true instead and see if it dosnt work — Mathias Rønnow Nørtoft
– Mathias Rønnow Nørtoft, Commented Jul 23, 2017 at 17:11
@MathiasRønnowNørtoft thanks,, But I have tried this one, it is not working. — Varun Sharma
– Varun Sharma, Commented Jul 23, 2017 at 17:17

Jesus Segnini · Accepted Answer · 2017-07-23 17:19:55Z

1

I really suggest you to avoid mixing angular with jQuery, instead of that you will prefer to get the job done with angular.

1st) Save session storage checked values in a place you can access from angular template.

$scope.isChecked = sessionStorage.getItem('confirmCheck');

2nd) Use angular directive ngChecked.

<input type="checkbox" ng-checked="isChecked"></input>

answered Jul 23, 2017 at 17:19

Jesus Segnini

3551 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Varun Sharma Over a year ago

Eduardo Thanks for this answer. I am new in Angular. Could you provide me HTML with Directive. Or Above both steps should I follow?

Jesus Segnini Over a year ago

Sure, is a simple example. You can see this on fiddle jsfiddle.net/6pr17t77

Varun Sharma Over a year ago

thanks a lot. it is working. But it is by default checked after reloading so If I unchecked then checkbox should be unchecked.

Jesus Segnini Over a year ago

Yes, you need to read the sessionStorage variable and save on isChecked variable from example.

Varun Sharma Over a year ago

thanks a lot giving your time. thanks. I will implement.

Collectives™ on Stack Overflow

How to update checkbox (checked or unchecked) from javascript controller to html page after reloading in Angular Js?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related