如何使用本地存儲刷新頁面後保持複選框處於選中狀態或取消選中狀態？

Question

如何使用本地存儲在Angularjs中刷新頁面後保持複選框處於選中狀態還是取消選中？

這裏我寫了一些代碼：

<ul class="custom-checkbox"> 
       <li ng-repeat="type in typeoffeatures"> 
        <input type="checkbox" id="{{type.value}}" ng-checked=type.flagset ng-click="toggleSelection1(type.value)" value="{{type.value}}" required/> 
        <label for="{{type.value}}"><div class='custom-chkbox'> 
          <span>{{type.value}}</span> 
         </div></label> 
       </li> 
      </ul> 

JS代碼：

$scope.typeoffeatures = [{ 
      value : 'Authentication', 
      flagset : true, 
     },{ 
      value : 'Notification', 
      flagset : false, 
     },{ 
      value : 'Analytics', 
      flagset : true, 
     }]; 
    }); 

Codepen link here。

Answer 1

我做了一些調整，以您的codepen：

• 添加ng-model的複選框
• 改變ng-click到ng-change（更可靠）

• 添加ng-true-value和ng-false-value代表真假as strings

  <input type="checkbox" id="{{type.value}}" ng-model="type.flagset" 
       ng-change="saveField(type.value, type.flagset)" 
       ng-true-value="'true'" ng-false-value="'false'" required/> 
  

https://codepen.io/anon/pen/dOeKjj?editors=1010