I'm trying to store a checkbox list with each checkboxes values in the localStorage but I'm always getting a dupes error within ng-repeat or a Unexpected token o in JSON at position 1
, should I use JSON.parse on the object.
我正在尝试在localStorage中存储一个带有每个复选框值的复选框列表,但是我总是在ng-repeat中得到一个dupes错误,或者在位置1的JSON中得到一个Unexpected token o,如果我在对象上使用JSON.parse。
Basically this is an options list that I later want to load but I also want to load the states when I access the menu, should they exist in the localStorage.
基本上这是一个我后来想要加载的选项列表,但我还想在访问菜单时加载状态,如果它们存在于localStorage中。
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>
I'm using simple localStorage and not the directive, due to another unrelated issue in my app.
由于我的应用程序中存在另一个不相关的问题,我使用简单的localStorage而不是指令。
EDIT: here is the code preview in plunkr
编辑:这是plunkr中的代码预览
1 个解决方案
#1
1
Found out the issue. I was missing track by $index in the ng-repeat.
找到了问题。我在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 changes:
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));
};
#1
1
Found out the issue. I was missing track by $index in the ng-repeat.
找到了问题。我在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 changes:
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));
};