将要计划完成事的列表存在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>

angular1.x todolist 实现的更多相关文章

  1. Vue.js基础篇实战--一个ToDoList小应用

    距离开始学Vue已经过去一个多月了,总想把学到的东西柔和在一起,做点东西出来,于是有了这个Todolist小应用. 使用vuex 纯粹基础,没有用到web pack,vuex,npm,下次把它改造一下 ...

  2. 重写官方TodoList,对于初学react+redux的人来说,很有好处

    虽然官网的TodoList的例子写的很详细,但是都是一步到位,就是给你一个action,好家伙,全部都写好了,给你一个reducer,所有功能也是都写好了,但是我们这些小白怎么可能一下就消化那么多,那 ...

  3. angular1.x的简单介绍 (一)

    angular1.x作为经典的mvc框架,可以创建能够复用的组件,也可进行双向数据绑定.国内的vue.js/avaloon.js都是同类型的框架.适合使用angularjs的项目有大型信息化管理系统: ...

  4. [vue案例的知识点]todo-list

    文章的原材料来自于vue的官方示例:https://cn.vuejs.org/v2/examples/todomvc.html,我们在学习过程中,试着对其中的一些知识点进行记录: 一.浏览器数据存储, ...

  5. Angular1还是Angular2

    Angular1还是Angular2 学完angular1,尝试去看了下angular2,虽然号称更强更快,可是这基于ES6和TypeScript的全新框架让人完全招架不住,而且我只是需要angula ...

  6. 用vuejs实现一个todolist项目

    用vue.js实现一个todolist项目:input输入框输入的值会呈现在下方,并且会保存在localStorage里面,而且下方的列表点击之后也会有变化: 完整代码: App.vue <te ...

  7. 在Angular1.X中使用CSS Modules

    在Angular1.5中,增加了一个Component方法,并且定义了组件的若干生命周期hook,在代码规范中也是推崇组件化开发,但是很遗憾的是,CSS模块化组件化的问题并没有得到解决,大部分项目的打 ...

  8. 基于angular写的一个todolist

    对于新手来说,使用angularjs写一个todolist可以快速入门

  9. zmNgFrameWork 架构升级ng1.5和md5静态资源缓存方案【angular1.x】

    前言: 在我前面的博客,angular项目总结——angular + browserify + gulp + bower + less 架构分享  把我开发angular的架构进行了分享,并上传到了g ...

随机推荐

  1. postman具体讲解

    postman 简单教程-实现简单的接口测试 最近开始做接口测试了,因为公司电脑刚好有postman,于是就用postman来做接口测试,哈哈哈哈,...postman 功能蛮强大的,还比较好用,下面 ...

  2. php 函数func_get_args()、func_get_arg()与func_num_args()之间的区别

    php经常会有一些看似相近的函数,然而区别很大.[func_get_arg(),func_get_args(),func_num_args()]的区别,我们先看一下,下面的实例代码 从上面的结果中我们 ...

  3. Software Testing Techniques Homework 1

    I have met some errors in recent years, one of them which impress me most. It happend when I try to ...

  4. 初始HTML

    了解HTML 1.1       HTML的作用 HTML就是用来制作网页 1.2       什么是HTML HTML是英文HyperText Markup Language的首字母缩写,即超文本标 ...

  5. 如何找回SQL Server实例安装时的序列号

    当需要再次安装SQL Server时,如果序列号找不到了,可以试着从已经安装的实例里找回序列号,因为安装完SQL Server后,序列号(Product Key)被保存在注册表里: MSDN订阅下载的 ...

  6. Nginx 0.8.x + PHP 5.2.13(FastCGI)搭建胜过Apache十倍的Web服务器(第6版)

    前言:本文是我撰写的关于搭建“Nginx + PHP(FastCGI)”Web服务器的第6篇文章.本系列文章作为国内最早详细介绍 Nginx + PHP 安装.配置.使用的资料之一,为推动 Nginx ...

  7. 乘风破浪:LeetCode真题_014_Longest Common Prefix

    乘风破浪:LeetCode真题_014_Longest Common Prefix 一.前言 如何输出最长的共同前缀呢,在给定的字符串中,我们可以通过笨办法去遍历,直到其中某一个字符不相等了,这样就得 ...

  8. Analysis of Algorithms

    算法分析 Introduction 有各种原因要求我们分析算法,像预测算法性能,比较不同算法优劣等,其中很实际的一条原因是为了避免性能错误,要对自己算法的性能有个概念. 科学方法(scientific ...

  9. iOS动画暂停和继续-本质是速度控制和时间坐标转换

    时间永不停止! 写一个CALayer的分类,控制动画的暂停与继续 extension CALayer { ///暂停动画 func pauseAnimation() { //取出当前时间,转成动画暂停 ...

  10. Hive分区表创建,增加及删除

    1.创建Hive分区表,按字段分区 CREATE TABLE test1 ( id bigint , create_time timestamp , user_id string) partition ...