AngularJS待办事项列表应用程序-在页面刷新中保留列表[重复]
我正在使用AngularJS制作一个简单的待办事项列表应用程序。我实际上使用的是一个ASP.NET MVC模板，但到目前为止，我已经设法通过使用Angular和Bootstrap使所有的工作都正常。
<!DOCTYPE HTML>
<html ng-app="todoApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body>
<div ng-controller="todoList" class="jumbotron">
<h2><strong>To-Do List</strong></h2>
<br/>
<form ng-submit="addTodo()">
<input type="text" ng-model="todoText"
placeholder="Add new task" size="30">
<button type="submit" class="btn btn-primary glyphicon glyphicon-plus">Add</button>
</form>
<br/>
<ul>
<li ng-repeat="todo in todos">
<label class="checkbox">
<input type="checkbox" ng-model="todo.done">
<span class="done-{{todo.done}}">{{todo.text}}</span>
<span class="glyphicon glyphicon-trash" ng-click="removeTodo()"></span>
</label>
</li>
</ul>
</div>
<script>
var app = angular.module('todoApp', []);
app.controller('todoList', function ($scope, $localStorage) {
$scope.getTodos = function() {
var str = $localStorage.getItem("todos");
$scope.todos = JSON.parse(str);
if (!todos) {
$scope.todos = [{ text: 'Feed the cat', done: true }, { text: 'Mow the lawn', done: false }];
}
}
$scope.saveToDos = function() {
var str = JSON.stringify(todos);
$localStorage.SetItem("todos", str);
}
$scope.addTodo = function () {
if($scope.todoText !== '') {
$scope.todos.push({text:$scope.todoText, done:false});
$scope.todoText = '';
saveToDos();
}
};
$scope.removeToDo = function() {
todos.splice($index, 1);
saveToDos();
}
});
</script>
</body>
</html>共有1个答案
$LocalStorage不是angular服务，它是一个内置的浏览器功能。
你应该这样使用它：
var jsonObject = {key: 'value'};
window.localStorage.setItem("varName", JSON.stringify(jsonObject)); // this will save "varName" in the local storage with jsonObject as value
jsonObject = JSON.parse(window.localStorage.getItem("varName")); // this will read "varName" from localStorage to jsonObject
-
该插件为待办事项列表组件提供了简单的功能。 用法 该插件可以作为 jQuery 插件或使用数据 API 激活。 数据 API 通过向 ul 元素添加 data-widget="todo-list" 来激活插件。如果你需要提供 onCheck 和 onUncheck 方法，请使用 jQuery API。 jQuery jQuery API 提供了更多可自定义的选项，允许开发人员处理待办事项列表中的选
-
我一直在尝试用Android Studio制作一个待办事项列表应用程序。目的是在顶部有一个“添加新任务”按钮，它会打开一个对话框，我可以通过这个对话框输入新任务。然后任务会出现在按钮下方的列表中。 问题是按钮一直出现在列表中的每个任务后（重复的按钮是不可点击的） 问题截图 这是我的代码： 以下是xml：
-
我正在使用php和javascript进行网络编程，这是我想问的一个一般性问题，通常在页面刷新时，文本区域或输入中的所有内容都会被删除； 是否有办法保留用户输入、键入的字符或复选框？不保存到会话中？还是我真的需要保存它？非常感谢。 （我不是说表单提交导致重新加载，但只是简单地键入文本区域，然后按下刷新按钮。）
-
我正在主干网中处理一个示例待办事项列表项目，我想了解框架希望我如何在嵌套列表场景中组织其视图和模型。 为了阐明我的意思，我的单页主干应用程序应该显示待办事项列表。从后端的角度来看，有一个列表资源和一个项目（todo列表中的一个条目）资源。大致如下： 周一的杂务 芹菜 由于我的是Rails 3.2应用程序，我模糊地遵循Railscasts的主干。js教程，这就是我获取当前设计的来源。我很想知道我是否
-
问题内容： 我是新手。我正在使用获取对象列表并将其显示在第一页上的服务。然后根据单击的对象，在下一页上设置选项卡标题。但是，当我刷新页面时，列表的范围丢失了，并且选项卡头引发了异常，导致页面无法显示信息。即使刷新第二页，是否可以保留上一个屏幕上单击了哪个对象的信息？ 问题答案： 您可以使用角度本地存储 角度本地存储 示例如何使用它： 使用本地存储的示例
-
所以我有一个递归程序，我试图生成一个字符串的所有排列。我打算将排列存储在一个名为ans的列表中。 每个当前排列都存储在用于填充ans列表的容器列表中。我怀疑，因为列表是一种引用类型，所以我可能会因为容器列表被操纵而丢失ans列表中的值？我是白痴吗