javascript - 在 Angular Js 中重新加载后，如何将复选框(选中或未选中)从 javascript Controller 更新为 html 页面？

Question

我是 Angular JS 和实现单页应用程序的新手。我已经实现了一个复选框，当我选中复选框时，我想在重新加载后保留该复选框的状态。因此，当我单击复选框时，然后通过 Angular js 中的 $on($destroy) 将状态(选中或未选中)存储在 session 中。

我看到一个链接 Keep checkbox checked after page refresh AngularJS ，但这对我来说不起作用。

我正在分享我的示例代码。

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

我能够在 session 中存储复选框的状态，但无法更改 HTML 页面中的状态。当我导航到另一个页面并返回到上一页时，值会保留在 Angular Controller 中但不会更新在 HTML 页面中。请分享您的想法。提前致谢。

Answer 1

我真的建议你避免将 Angular 与 jQuery 混合在一起，相反，你会更喜欢使用 Angular 来完成工作。

1)将 session 存储检查值保存在可以从 Angular 模板访问的位置。

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

第二)使用 Angular Directive(指令) ngChecked。

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