Ionic V1-AngularJS复选框无法根据localStorage值自动勾选问题

我一眼就看出问题出在哪了——localStorage存的所有值都是字符串类型，但AngularJS的ng-model对复选框要求的是布尔值（true/false）。你控制台看到的true其实是字符串"true"，不是真正的布尔值，这就导致复选框识别不了，自然不会自动勾选。

下面给你一步步解决的方案：

第一步：把localStorage的字符串转成布尔值 #

在控制器里，你需要把从localStorage取出来的字符串值转换成布尔值，把原来的赋值代码替换成：

// 将字符串"true"/"false"转换为布尔值
$scope.data.notification = window.localStorage.getItem('notification') === 'true';
$scope.data.enable_cam = window.localStorage.getItem('enable_cam') === 'true';
$scope.data.enable_power = window.localStorage.getItem('enable_power') === 'true';
$scope.data.enable_fire = window.localStorage.getItem('enable_fire') === 'true';
$scope.data.casefire = window.localStorage.getItem('casefire') === 'true';

第二步：去掉HTML里多余的checked属性 #

ng-model已经能完成双向绑定了，再加checked="{{data.notification}}"反而会和ng-model冲突，直接删掉即可，修改后的HTML代码：

<li class="item item-toggle">
  Notifications
  <label class="toggle toggle-positive">
    <input type="checkbox" ng-model="data.notification">
    <div class="track">
      <div class="handle"></div>
    </div>
  </label>
</li>

第三步：保存时把布尔值转成字符串 #

因为localStorage只能存储字符串，所以在settings方法里保存配置时，要把布尔值转换为字符串：

$scope.settings = function () {
  // 将布尔值转成字符串后存入localStorage
  window.localStorage.setItem('notification', $scope.data.notification.toString());
  window.localStorage.setItem('enable_cam', $scope.data.enable_cam.toString());
  window.localStorage.setItem('enable_power', $scope.data.enable_power.toString());
  window.localStorage.setItem('enable_fire', $scope.data.enable_fire.toString());
  window.localStorage.setItem('casefire', $scope.data.casefire.toString());
  console.log(window.localStorage.getItem('notification'));
};

完整修改后的控制器代码 #

.controller('ConfigCtrl', function($scope, $stateParams,$http,$timeout,$localStorage,StorageService) {
  $scope.data = {}; 
  // 读取普通字符串类型的配置项
  $scope.data.claymore_api= window.localStorage.getItem('claymore_api'); 
  $scope.data.cam_api= window.localStorage.getItem('cam_api'); 
  $scope.data.rpi_api= window.localStorage.getItem('rpi_api'); 
  $scope.data.fire_api= window.localStorage.getItem('fire_api'); 
  // 转换布尔类型配置项
  $scope.data.notification= window.localStorage.getItem('notification') === 'true'; 
  $scope.data.enable_cam= window.localStorage.getItem('enable_cam') === 'true'; 
  $scope.data.enable_power= window.localStorage.getItem('enable_power') === 'true'; 
  $scope.data.enable_fire= window.localStorage.getItem('enable_fire') === 'true'; 
  $scope.data.casefire= window.localStorage.getItem('casefire') === 'true'; 

  console.log($scope.data.notification); 

  $scope.add = function () { 
    window.localStorage.setItem('claymore_api',$scope.data.claymore_api); 
    window.localStorage.setItem('cam_api',$scope.data.cam_api); 
    window.localStorage.setItem('rpi_api',$scope.data.rpi_api); 
    window.localStorage.setItem('fire_api',$scope.data.fire_api); 
  }; 

  $scope.settings = function () { 
    window.localStorage.setItem('notification',$scope.data.notification.toString()); 
    window.localStorage.setItem('enable_cam',$scope.data.enable_cam.toString()); 
    window.localStorage.setItem('enable_power',$scope.data.enable_power.toString()); 
    window.localStorage.setItem('enable_fire',$scope.data.enable_fire.toString()); 
    window.localStorage.setItem('casefire',$scope.data.casefire.toString()); 
    console.log(window.localStorage.getItem('notification')); 
  }; 
})

这样修改后，你的复选框就能根据localStorage里的值自动勾选了，而且修改后的状态也能正确保存回去~

内容的提问来源于stack exchange，提问作者Casper Round