Angular 1:页面刷新后不会保留最后一个复选框

时间:2016-03-31 19:47:57

标签: javascript angularjs local-storage

我将所有数据保存到localStorage。选中复选框时,将调用函数以更改项目状态。它工作正常。但是,在页面刷新之后,上次检查的项目将被取消选中(或者如果它未被选中,则会被检查),而其他项目工作正常。为什么在刷新页面后会忽略最后一个操作?

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

(添加几个项目并点击“click me”查看所有项目然后刷新页面,最后一个操作将被忽略)

观点:

<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);
    };
    //
}]);

2 个答案:

答案 0 :(得分:1)

md-checkbox旨在切换ng-model中的任何内容,因此您的代码md-checkbox正在切换completed属性,然后您又将其更改回来$scope.toggleToDoItem功能。为什么这适用于所有项目,除了最后点击我不确定。

因此,我将ng-click更改为仅将项目保存到本地存储空间仍然遇到同样的问题,这导致我认为问题是由ng-click上的md-checkbox引起的。

 <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。来自关于ng-change的{​​{3}}:

  

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

话虽如此,以上关于不需要自己切换completed财产的内容仍然存在。

答案 1 :(得分:0)

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