我试图在 localStorage 中存储每个复选框值的复选框列表,但我总是在 ng-repeat 中收到重复错误或 JSON 中位置 1 的意外标记 o
,我应该在对象上使用 JSON.parse 吗?
基本上,这是一个我稍后想要加载的选项列表,但我也想在访问菜单时加载状态(如果它们存在于本地存储中)。
Controller .js
var initialAlarmColumns = [{
columnName: "Alarm",
value: true
}, {
columnName: "Description",
value: true
}, {
columnName: "Acknowledged by",
value: false
}];
if(localStorage.getItem('alarmColumns') === null){
localStorage.setItem('alarmColumns', JSON.stringify(initialAlarmColumns));
self.alarmColumns = initialAlarmColumns;
}
else{
self.alarmColumns = JSON.parse(localStorage.getItem('alarmColumns'));
}
self.setAlarmColumns = function(columnsChecked){
localStorage.setItem('alarmColumns', JSON.stringify(columnsChecked));
};
optionsView.html
<ul class="alarmColumnOptions" ng-repeat="alarmOptions in $ctrl.alarmColumns">
<li><label><input type="checkbox" name="alarmOptions.columnName" ng-model="alarmOptions.value" ng-change="$ctrl.setAlarmColumns($ctrl.alarmColumns)"> {{alarmOptions.columnName}}</label></li>
</ul>
由于我的应用程序中存在另一个不相关的问题,我正在使用简单的 localStorage 而不是指令。
最佳答案
发现问题了。我在 ng-repeat 中错过了 $index 的跟踪。
<h3>Alarm Columns</h3>
<ul class="alarmColumnOptions" ng-repeat="alarmOptions in alarmColumns track by $index">
<li><label><input type="checkbox" name="alarmOptions.columnName" ng-model="alarmOptions.value" ng-change="setAlarmColumns(alarmColumns)"> {{alarmOptions.columnName}}</label></li>
</ul>
js 更改:
var initialAlarmColumns = [{
columnName: "Alarm",
value: true
}, {
columnName: "Description",
value: true
}, {
columnName: "Acknowledged by",
value: false
}];
if (localStorage.getItem('alarmColumns') === null) {
localStorage.setItem('alarmColumns', JSON.stringify(initialAlarmColumns));
}
$scope.alarmColumns = JSON.parse(localStorage.getItem('alarmColumns'));
$scope.setAlarmColumns = function(columnsChecked) {
localStorage.setItem('alarmColumns', JSON.stringify(columnsChecked));
};
关于javascript - Angular - 在 localStorage 中存储和读取带有状态的复选框列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38596001/