将要计划完成事的列表存在localStroage ，实现本地同步删除，同步增加。

<!DOCTYPE html>
<html lang="zh" ng-app="app">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="http://cdn.static.runoob.com/libs/foundation/5.5.3/css/foundation.min.css"><title>angularjs todolist简单实现</title>
</head>
<body ng-cloak style="padding:10px"><div ng-controller="myCtrl"><div class="alert-box alert" ng-hide="alertMessage">请填写信息</div><input class="small-8"" type="text" ng-model="msg" ng-keyup="enterEvent($event)"><button class="tiny small-3"" ng-click="addClick()">添加</button><h5 ng-show="lists.length>0">今天要做的事</h5><ul><li ng-repeat="item in lists track by $index">{{item}} <a ng-click="delClick($index)">删除</a></li></ul></div><script src="https://cdn.bootcss.com/angular.js/1.5.0/angular.min.js"></script><script>angular.module("app", []).controller("myCtrl", function($scope) {$scope.msg = "";$scope.lists = localStorage.getItem('todolist')? localStorage.getItem('todolist').split(','):[];$scope.alertMessage = true;$scope.addClick = function() {if($scope.msg == ""){$scope.alertMessage = false;    } else{$scope.alertMessage = true;$scope.lists.push($scope.msg);localStorage.setItem('todolist', $scope.lists)}$scope.msg = "";};$scope.delClick = function($index) {$scope.lists.splice($index,1);var bsaveStr = localStorage.getItem('todolist');var bsaveArr = bsaveStr.split(',');bsaveArr.splice($index,1);localStorage.setItem('todolist',bsaveArr);};$scope.enterEvent = function(e) {if(e.keyCode == 13){$scope.addClick();}};})</script>
</body>
</html>

转载于:https://www.cnblogs.com/wrongcode/p/10583961.html

angular1.x todolist 实现相关推荐

Angular1.x的自定义指令directive参数配置详细说明
组件结构 angular-component-demo.html <!DOCTYPE html> <html lang="zh" ng-app="app ...
Robotium todolist.test.elements
2019独角兽企业重金招聘Python工程师标准>>> ElementsEditToDoItemActivity package com.example.todolist.test. ...
Vue之Todolist案例和ES6语法
2.7 Todolist案例 2.7.1 准备工作 <!DOCTYPE html> <html> <head><meta charset="utf- ...
vue写的简单版todolist
上一张丑图: 项目演示地址:http://47.75.195.199/todolist/ 源码地址:https://github.com/chunsenye/... <template>& ...
Android程序ToDoList增加配置项页面
本文要做的事情就是在前面做的简单的ToDoList程序上增加一个配置项页面(Reference).这个Reference页面也非常简单: 这个ToDoList现在有两个页面,主页面能填写待办事项,然后 ...
初学微信小程序 TodoList
微信小程序的学习微信小程序的开始尝试 TodoList 微信开发者工具生成目录如下: . |-- app.js |-- app.json |-- app.wxss |-- pages | |-- ...
用python实现todolist_So easy !用 Python 开发一个todolist
原标题:So easy !用 Python 开发一个todolist 有一句话是这样说的:"凡事预则立,不预则废",说的是我们在做事之前,最好制定好你的计划,然后有序的去执行,这样 ...
html任务清单源码,JavaScript jQuery 任务清单 ToDoList
代码实现: ToDoList.html(复制并保存为html文件,打开即可见效果): <!DOCTYPE html> <html> <head> <meta ...
「后端小伙伴来学前端了」Vue中Props 实现组件通信TodoList案例
自己拍的小云彩源码在文末. 前言上篇文章写了个V利用Props进行组件之间的通信,这不立马就安排上这个案例拉丫.光学不敲等于没学哈(资深大佬除外哈) 目标就是实现如下的样子: 能够进行增删改查,并 ...

angular1.x todolist 实现

将要计划完成事的列表存在localStroage ，实现本地同步删除，同步增加。

angular1.x todolist 实现相关推荐

最新文章

热门文章