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

    最近在使用ormlite框架进行数据库的操作,下面简单的写个demo来学习下 1.下载jar包 这里使用的是ormlite-core-5.0.jar 和 ormlite-android-5.0.jar ...

  2. 用webpack实现前端自动化构建

    什么是自动化的前端构建流? 1. 自动补全css私有前缀,自动转化less\sass为css,自动转化es6\vue\jsx语法为js,自动打包小图片为base64以减少http请求,自动给js,cs ...

  3. FTP上传和WEB上传的区别

       说区别之前,咱先说说什么是上传?上传就是将信息从个人计算机(本地计算机)传递到中央计算机(远程计算机)系统上,让网络上的人都能看到.将制作好的网页.文字.图片等发布到互联网上去,以便让其他人浏览 ...

  4. Linux yum提示Loaded plugins错误的解决方法

    yum是Linux软件包管理器,也叫yum源,在yum使用过程中,有时会出现Loaded plugins错误,重启无效,遇到这种情况该如何解决呢?下面就给大家介绍下Linux yum提示Loaded ...

  5. mysql DML语句学习1

    DML 操作是指对数据库中表记录的操作,主要包括表记录插入(insert).更新(update).删除(delete)和查询(select) 1. 插入记录 表创建好后,就可以往里插入记录,基本语句如 ...

  6. Mof提权科普

    今天再拿一个站的时候遇到了很多问题,拿站的过程就不说了,其中要用到mof提权,不管能不能提下,我进行一个mof提权的科普 这里我综合各类mof提权进行了 综合 首先说一下,无shell情况下的mysq ...

  7. shell基础之脚本执行，命令别名以及快捷键等

    脚本执行方式 比如我们在/root/下编写了一个脚本,名字为hello.sh.那么怎么调用执行它呢?有两种办法: (1)直接通过bash,如下: bash  hello.sh 注:采用bash执行脚本 ...

  8. BZOJ3208:花神的秒题计划Ⅰ(记忆化搜索DP)

    Description 背景[backboard]: Memphis等一群蒟蒻出题中,花神凑过来秒题……   描述[discribe]: 花花山峰峦起伏,峰顶常年被雪,Memphis打算帮花花山风景区 ...

  9. css注入获取网页中的数据

    <style><?php echo htmlspecialchars($_GET['x']);?></style> <br><br>< ...

  10. FRM一级备考感想

    作为金融小白,工作四年多,边边角角有了些许的最直观认识,决定深入了解下金融相关123. 曾经尝试CFA失败,转战FRM安慰下失败的灵魂. 2018.11.17 FRM Part I 考试结束,自7月初 ...