角度 - ローカルストア内の状態のチェックボックスリスト

Question

各チェックボックスの値がlocalStorageのチェックボックスリストを格納しようとしていますが、ng-repeatまたはUnexpected token o in JSON at position 1の中で、オブジェクト上でJSON.parseを使用します。

これは後でロードするオプションリストですが、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> 

私が原因私のアプリでは、他の無関係な問題に、簡単なのlocalStorageやないディレクティブを使用しています。

EDIT：ここでの問題を発見code preview in plunkr

Answer 1

です。 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)); 
     };