Angular 1：页面刷新后最后一个复选框不会保持选中状态答案

【问题标题】：Angular 1: Last checkbox doesn't stay checked after page refreshAngular 1：页面刷新后最后一个复选框不会保持选中状态
【发布时间】：2016-04-01 05:56:42
【问题描述】：

我正在将所有数据保存到 localStorage。当复选框被选中时，调用函数来更改项目状态。它工作正常。但是，在页面刷新后，最后一个选中的项目会被取消选中（或者如果它没有被选中，它会被选中），而其他项目工作得很好。为什么刷新页面后最后一个操作会被忽略？

这里是codepen：http://codepen.io/kunokdev/pen/vGeEoY?editors=1010

（添加几个项目并单击所有项目的“单击我”然后刷新页面，最后一个操作将被忽略）

观点：

<div ng-app="TaskApp" ng-controller="ToDoCtrl">
  <form>
    <input type="text" ng-model="toDoItem">
    <input type="submit" ng-click="addToDoItem()">
  </form>
  <div>
    <ul>
      <div
        ng-repeat="item in toDoItems |
                   orderBy: 'createdAt'
                   track by item.createdAt">
        <b>Content:</b> {{item.content}} <br>
        <b>Completed?</b> {{item.completed}}
        <md-checkbox ng-model="item.completed" ng-click="toggleToDoItem(item.completed)" aria-label="todo-checkbox">
          CLICK ME
        </md-checkbox>
      </div>
    </ul>
  </div>
</div>

还有 JS：

var ls = {};

ls.get = function(key) {
    return JSON.parse(localStorage.getItem(key));
};

// sets or updates a value for a key
ls.set = function(key, val) {
    localStorage.setItem(key, JSON.stringify(val));
};

// returns true if value is set, else false
ls.isSet = function(key) {
    var val = ls.get(key);
    return ( null === val || 'undefined' === typeof val) ? false : true;
};

// removes a set item
ls.remove = function(key) {
    localStorage.removeItem(key)
};


var TaskApp = angular.module('TaskApp', [
  'ngMaterial',
  'taskAppControllers'
]);

var taskAppControllers = angular.module('taskAppControllers',[]);

taskAppControllers.controller('ToDoCtrl', ['$scope',
  function($scope){
    //
    loadToDoItems = function(){
      var data = ls.get("toDoData");
      if (data == null) data = [];
      return data;
    };
    //
    $scope.toDoItems = loadToDoItems();
    //
    $scope.addToDoItem = function(){
      var toDoItems = $scope.toDoItems;
      var newToDoItem = {
        "content" : $scope.toDoItem,
        "createdAt" : Date.now(),
        "completed" : false
      }
      toDoItems.push(newToDoItem);
      ls.set("toDoData", toDoItems);
      $scope.toDoItem = "";
    };
    //
    $scope.toggleToDoItem = function(item){
      console.log('test');
      var toDoItems = $scope.toDoItems;
      for (var i = 0; i < toDoItems.length; i++)
        if (toDoItems[i].createdAt === item){
          if (toDoItems[i].completed == true)
            toDoItems[i].completed = false;
          else
            toDoItems[i].completed = true;
        }
      ls.set('toDoData', toDoItems);
    };
    //
}]);

【问题讨论】：

标签： javascript angularjs local-storage

【解决方案1】：

md-checkbox 旨在切换您在ng-model 中输入的任何内容，因此使用您的代码，md-checkbox 切换了completed 属性，然后您在$scope.toggleToDoItem 函数中再次将其更改回来。为什么这对除了最后一次点击之外的所有项目都有效我不确定。

所以我将ng-click 更改为仅将项目保存到本地存储，但仍然遇到同样的问题，这让我相信问题是由在md-checkbox 上使用ng-click 引起的。

 <md-checkbox ng-model="item.completed" ng-click="saveToLocalStorage()" aria-label="todo-checkbox">
    CLICK ME
 </md-checkbox>

$scope.saveToLocalStorage = function() {
  ls.set('toDoData', $scope.toDoItems);
};

所以我删除了ng-click 并在$scope.toDoItems 上设置了一个手表。

<md-checkbox ng-model="item.completed" aria-label="todo-checkbox">

$scope.$watch("toDoItems", function() {
  ls.set("toDoData", $scope.toDoItems);
}, true);

Codepen

-- 编辑--

只是阅读文档并觉得自己像个白痴，您应该使用ng-change 而不是ng-click。来自docs关于ng-change：

由于用户与输入元素的交互而导致输入发生变化时执行的角度表达式。

话虽如此，上面关于不需要自己切换completed 属性的内容仍然有效。

【讨论】：

再一次，Rintarō Okabe 拯救了一天！

【解决方案2】：

您正在将 item.completed（在 HTML 中）传递给您的 toggleToDoItem(item) 方法。然后在您的数组循环中，将 item.Created 字段与 item.completed 参数进行比较。这是将 Date 类型与 Bool 进行比较。这应该如何工作？

【讨论】：