返回上一页后Checkbox选中状态丢失问题求助

问题分析 #

你当前的实现有几个核心问题导致状态无法正确保存：

• 所有复选框共用同一个name="checkbox-answer-input"，localStorage中只能存储一个状态，后续选中的复选框会覆盖之前的记录
• 直接通过原生DOM操作修改checked属性，和AngularJS的ng-model双向绑定机制冲突——Angular会在初始化时用模型的初始值覆盖DOM状态
• 原生window.load事件的执行时机晚于Angular的初始化流程，导致恢复状态的操作被Angular的模型初始化覆盖

修复方案 #

利用AngularJS的生命周期和双向绑定特性，直接操作answer模型并同步到localStorage，而不是绕开框架操作DOM：

修改后的HTML代码 #

<style>
    .add-margin {
        margin-top:10px !important;
    }
</style>
<div>
    <div ng-init="loaded()" ng-class="{'add-margin': descriptionsAvailable}" class="checkbox-inline" ng-repeat="opt in options track by $index">
        <label style="direction:ltr;">
            <input ng-disabled="answer['none']" class="save-cb-state" type="checkbox" 
                   ng-model="answer[opt]" ng-true-value="true" ng-false-value="false" 
                   name="checkbox-{{$index}}" 
                   style="width: 15px; padding: 0; margin: 0; position: relative; top: 0px; align-items: center;">
            <span>{{opt}}</span><br/>
            <span><i>{{descriptions[$index]}}</i></span>
        </label>
    </div>
</div>

修改后的AngularJS控制器代码 #

// 整合状态逻辑到Angular控制器中
angular.module('yourAppName').controller('YourController', function($scope) {
    // 初始化基础数据模型
    $scope.answer = {};
    $scope.options = []; // 你的选项列表，需提前定义
    $scope.descriptions = []; // 对应的描述文本

    // 页面初始化时恢复保存的状态
    $scope.loaded = function() {
        var savedState = localStorage.getItem('CBState');
        if (savedState) {
            // 将本地存储的状态合并到当前模型
            angular.extend($scope.answer, JSON.parse(savedState));
        }

        // 深度监听answer模型变化，自动同步到localStorage
        $scope.$watch('answer', function(newState) {
            localStorage.setItem('CBState', JSON.stringify(newState));
        }, true);
    };
});

关键改进点 #

• 用Angular的$watch深度监听answer对象变化，自动同步到localStorage，无需手动监听原生click事件
• 在loaded()初始化函数中恢复状态，确保Angular启动时就能拿到正确的模型值
• 给每个复选框设置唯一name（checkbox-{{$index}}），避免DOM标识冲突
• 完全基于Angular双向绑定机制，不再直接操作DOM，消除框架与原生操作的冲突

内容的提问来源于stack exchange，提问作者B Noor