角 - 存儲和閱讀複選框列表與本地存儲中的狀態

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而不是指令，因爲在我的應用程序另一個無關的問題。

編輯：這裏是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)); 
     };