Question

即使在刷新页面后，我也试图保存复选框的状态。我可以获取每个动态复选框的索引，以便我知道选中了哪个复选框，但是即使页面刷新后我也无法使复选框保持不变。我尝试使用 localStorage 进行本地保存，即使它存储了值，也不会保持复选框状态相同：

动态复选框HTML：

<input type="checkbox" ng-model="checkbox[$index]" ng-change="alert($index)">

获取动态复选框索引：

$scope.checkbox = []; //checkbox index
$scope.alert = function(index, event){
  localStorage['checkbox'] = $scope.checkbox[index];
  alert("checkbox " + index + " is " + $scope.checkbox[index]);

}

//检查更改并更新

localStorage.getItem("checkbox") ? 
JSON.parse(localStorage.getItem("checkbox")) : false;

$scope.$watch(localStorage['checkbox'], function (newVal, oldVal) {
  if (oldVal !== newVal) {
    localStorage['checkbox'] = newVal;
  }
});

Answer 1

尝试使用此代码段，如果有信息并指向每个复选框，则需要从localstorage的内容循环。

示例HTML

<p ng-repeat="check in checkBoxes track by $index">
  <label>{{$index}}</label>
  <input type="checkbox" ng-model="checkBoxes[$index]" ng-change="valueChange()"/>
</p>

<pre>{{checkBoxes}}</pre>

控制器上的示例

$scope.checkBoxes = [false, false, false, false];

if(localStorage['checkBoxes']){
  $scope.checkBoxes = JSON.parse(localStorage.getItem("checkBoxes"));
  console.log(localStorage['checkBoxes'].length);
}

$scope.valueChange =function(){
  localStorage.setItem("checkBoxes", JSON.stringify($scope.checkBoxes));
};

Sample Plnkr

如何在页面刷新后保存动态复选框状态？

1 个答案: