ngChecked 似乎不想绑定到模型。为什么？

Question

我正在使用 Ionic，因此 angularjs，我正在尝试将设置存储在 localStorage 中。

我有一个复选框，我想用它来打开或关闭分析。 html 看起来像这样。

Analytics on/off
<label class="toggle toggle-balanced">
    <input type="checkbox" ng-click="toggleAnalytics()" ng-checked="analytics">
        <div class="track">
            <div class="handle"></div>
        </div>
</label>

在相关控制器中我有：

$scope.analytics = $localstorage.get('analyticsOnOff');
$log.log("Analytics initialised at", $scope.analytics);

$scope.toggleAnalytics = function(){ 

   if($scope.analytics===true){
      $scope.analytics = false;
      $localstorage.set('analyticsOnOff', false);
   }else{
      $scope.analytics = true;
      $localstorage.set('analyticsOnOff', true);
   } 

 $log.log("Analytics is ", $scope.analytics);

}

正如您所见，当您更改复选框时，toggleAnalytics() 函数会在 true 和 false 之间切换 $scope.analytics 并更新本地存储以反映这一点。

请注意，我使用的是 $localstorage 方法。 $localstorage 在另一个服务中定义。它允许您轻松设置和获取 localStorage 对象。

无论如何，我的问题是一个非常简单但令人费解的问题。我知道我可以从控制台日志中更改分析值，但无论我做什么，复选框都会初始化为打开状态。

有什么想法吗？

Answer 1

您应该在复选框上使用 ng-model，这将处理设置实际的属性 - 然后您可以使用 change 事件：

<input type="checkbox" ng-change="toggleAnalytics(analytics)" ng-model="analytics" />

控制器：

$scope.toggleAnalytics = function(isChecked) { 
   $localstorage.set('analyticsOnOff', isChecked);
   $log.log("Analytics is ", isChecked);
}

Answer 2

非常感谢大家的反馈。

@nickgraef 让我解决了真正的问题 - .get() returns 一个字符串。

@tymeJV 为我提供了一个更优雅的我自己的代码版本。

这就是我最后所做的，它是两个技巧的混合体。在我从 localstorage .get() 之后，我将分析变量直接转换为布尔值。

$scope.analytics = $localstorage.get('analyticsOnOff');
$scope.analytics = ($scope.analytics == 'true' ? true : false);

$log.log("Analytics initialised at", $scope.analytics);

$scope.toggleAnalytics = function(isChecked) { 
   $localstorage.set('analyticsOnOff', isChecked);
   $log.log("Analytics is ", isChecked);
}

ngChecked 似乎不想绑定到模型。为什么？

ngChecked doesn't seem to want to bind to the model. Why?

angularjs

local-storage

ionic-framework