在Angular Js中重新加载后，如何将复选框（选中或未选中）从javascript控制器更新到html页面？

Posted 2023-05-09

【中文标题】在Angular Js中重新加载后，如何将复选框（选中或未选中）从javascript控制器更新到html页面？

【英文标题】：How to update checkbox (checked or unchecked) from javascript controller to html page after reloading in Angular Js?

【发布时间】：2017-12-29 06:40:06

【问题描述】：

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

我看到了一个链接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"/>

控制器：

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

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

【问题讨论】：

检查dom时，sessionStorage.confirmCheck有什么值？是真还是“真”？

当复选框被点击然后为真，取消选中为假

但是当您单击复选框时，然后在 javascript 中在控制台 .dubugger 中显示 true 并在 javascript 中保留值，直到未从 html 页面选中。但是对于未选中的复选框，我必须先选中，然后在未选中错误值之后。

是的，但是您的会话存储字符串“true”还是布尔值 true？尝试将检查更改为 sessionStorage.confirmCheck == true 并查看它是否不起作用

@MathiasRønnowNørtoft 谢谢，但是我试过这个，它不起作用。

【参考方案1】：

我真的建议您避免将 Angular 与 jQuery 混合使用，而不是您更愿意使用 Angular 完成工作。

1st）将会话存储检查值保存在您可以从角度模板访问的位置。

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

2nd) 使用角度指令 ngChecked。

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

【讨论】：

爱德华多感谢您的回答。我是 Angular 的新手。你能给我提供带有指令的HTML吗？或者我应该遵循以上两个步骤？

当然，是一个简单的例子。你可以在 fiddle jsfiddle.net/6pr17t77

上看到这个

非常感谢。这是工作。但默认情况下，重新加载后会选中它，所以如果我取消选中，则应该取消选中复选框。

是的，您需要读取 sessionStorage 变量并保存在示例中的 isChecked 变量上。

非常感谢您抽出宝贵时间。谢谢。我会执行的。