2017-08-08 172 views
0

即时刷新页面后,我试图保存复选框的状态。我可以得到每个动态复选框的索引,因此我知道哪个复选框被选中,但是我无法让复选框在页面刷新后保持不变。我试着用的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; 
    } 
}); 
+0

需要ASIGN值的初始化,检查localStorage的有信息,然后ASIGN每个检查。 –

回答

1

试试这个片段,如果有info和asign到每个复选框,需要从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

+0

但是,它是如何记住我刷新页面后选中的复选框? –

+0

让我做一个plnkr。 –

+0

检查plnkr,并让我知道是否满足用例。 –

相关问题