Angular之toDoList的实现代码示例


Posted in Javascript onDecember 02, 2017

什么是todolist?

所谓的todolist就是把你所做的事情按顺序全部列出来,然后做完一件事,就在这一项之前打勾,此时状态就会变成已完成,todolist可以对所列的事情和已完成的事情删除和修改,当然已完成的事情就不能修改了。
当我们拿到一个todolist的时候,首先看到的是todolist的组成,是由一个文本框和,列表项构成,数据要通过控制器从文本框传送到列表项,然后在列表项展示出来。

话不多说,先上图;

Angular之toDoList的实现代码示例

功能:

首先,所有的数据都是存储在localStorage中的;其次,文本框中输入内容后,回车即可添加任务主题;可以按内容和添加时间来排序任务;可以筛选任务,分为未完成和已完成;可以一键删除所有任务;在任务清单前打勾,即表示为已完成;点击任务后面的x则会删除这一条任务;双击任务进入任务编辑模式;在大文本框中填写详细的任务计划;

(只能在全部任务列表中勾选该任务是否完成哦 0.0...)

直接上代码啦(注释应该写的很清楚哦)

<div class="container" ng-app="taskList">

        <div ng-controller="TaskController">

           <h1>My Task List</h1>

           <form ng-submit="addTask()">

              <input type="text" class="form-control" ng-model="taskText" autofocus="autofocus" required="required" placeholder="What needs to be done? Let's start with an Enter !" />

              <div class="checkbox" ng-show="hasTask()">

                <label>

                   <input type="checkbox" ng-model="isAllDone" ng-click="allDone()" /> 标记所有为以解决

                </label>

              </div>

           </form>

           <div class="btn-toolbar" ng-show="hasTask()">

              <div class="btn-group">

                <button type="button" class="btn btn-success" ng-click="predicate='text'; reverse=!reverse">内容</button>

                <button type="button" class="btn btn-success" ng-click="predicate='time'; reverse=!reverse">时间</button>

              </div>

              <div class="btn-group" role="group">

                <button type="button" class="btn btn-warning" ng-click="query.done=false">未完成</button>

                <button type="button" class="btn btn-warning" ng-click="query.done=true">已完成</button>

                <button type="button" class="btn btn-warning" ng-click="query.done=''">全部</button>

              </div>

              <div class="btn-group">

                <button type="button" class="btn btn-primary all">全部展开</button>

              </div>

              <div class="btn-group">

                <button type="button" class="btn btn-danger" ng-click="removeAll()">删除所有任务</button>

              </div>

           </div>

           <ul class="taskList">

              <li ng-repeat="task in taskList | filter:query | orderBy:predicate:reverse">

                <div class="checkbox">

                   <label>

                 <input type="checkbox" ng-model="task.done" ng-click="save()"><span class="text done-{{task.done}}">{{task.text}}</span>

               </label>

                   <button type="button" class="close" ng-click="removeTask(task)" data-dismiss="alert">×</button>

                   <span class="pull-right time">{{task.time}}</span>

                </div>

                <div class="taskText">

                   <form>

                      <textarea ng-model="task.desc" class="form-control desc" rows="4" cols="73" required="required"></textarea>

                      <button ng-click="addDesc(task)" class="btn btn-primary btn-sm submit" type="submit">submit</button>

                   </form>

                </div>

              </li>

           </ul>

           <div class="count">

              未完成:<span class="badge">{{count()}}</span>   已完成:<span class="badge">{{countDone()}}</span>   总数:<span class="badge">{{taskList.length}}</span>

           </div>

        </div>

      </div>

下面是js代码:

var app = angular.module('taskList',[]);

app.controller('TaskController',function($scope , dateFilter){

   //获取缓存中的taskList数据

   var tmp = localStorage.getItem('taskList');

   //转为json数据进行操作

   $scope.taskList = tmp ? angular.fromJson(tmp) : [];

   //新增任务

   $scope.addTask = function(){

      $scope.taskList.push({

        id : $scope.taskList.length + 1,

        text : $scope.taskText,

        done : false,

        time : getNowTime(),

        desc : ''

      });

      //此处用来清空文本框中的内容

      $scope.taskText = '';

      $scope.save();

   }

   //完善任务细则

   $scope.addDesc = function(task){

      $scope.save();

      alert('任务更新成功,请努力坚持哦  :)');

   }



   //还没解决 在未完成和已完成的列表中单击checkbox时,结果不会保存到缓存中去的情况



   //从缓存中删除任务

   $scope.removeTask = function(todo){

      $scope.taskList.splice($scope.taskList.indexOf(todo), 1);

      $scope.save();

   }

   //从缓存中删除所有任务

   $scope.removeAll = function(){

      $scope.taskList = [];

      localStorage.clear();

   }

   //新增任务后还要把任务存入缓存中

   $scope.save = function(){

      localStorage.setItem('taskList' , angular.toJson($scope.taskList));

   }

   //获取当前时间

   function getNowTime(){

      return dateFilter(new Date() , "yyyy-MM-dd HH:mm:ss");

   }

   $scope.hasTask = function(){

      return $scope.taskList.length > 0;

   }

   //标记为全部完成

   $scope.allDone = function(){

      angular.forEach($scope.taskList , function(task){

        task.done = $scope.isAllDone;

      });

      $scope.save();

   }

   //统计已完成的任务

   $scope.countDone = function(){

      var count = 0;

      angular.forEach($scope.taskList , function(task){

        count += task.done ? 1 : 0;

      });

      return count;

   }

   //统计未完成的任务

   $scope.count = function(){

      var count = 0;

      angular.forEach($scope.taskList , function(task){

        count += task.done ? 0 : 1;

      });

      return count;

   }

});

$(function(){

   //给未来元素加双击事件,双击任务显示或隐藏任务细节

   $(".taskList").delegate('li','dblclick',function(){

      $(this).find('.taskText').slideToggle();

   });

   //全部展开或全部收起

   $('.all').click(function(){

      var _this = $(this);

      if(_this.text() == '全部展开'){

        $('.taskText').slideDown();

        _this.text('全部收起');

      }else{

        $('.taskText').slideUp();

        _this.text('全部展开');

      }

   });

   //确认修改描述框后隐藏

   $('.taskList').delegate('.submit','click',function(){

      var _this = $(this);

      $(this).click(function(){

        _this.parents('.taskText').slideUp();

      });

   });

   //描述框获得焦点又失去焦点后会自动隐藏

   $('.taskList').delegate('.desc','focus',function(){

      var _this = $(this);

      _this.blur(function(){

        _this.parents('.taskText').slideUp();

      });

   });

});

到这就大功告成啦, 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
JavaScript写的一个自定义弹出式对话框代码
Jan 17 Javascript
一个jquery实现的不错的多行文字图片滚动效果
Sep 28 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
深入理解javascript严格模式(Strict Mode)
Nov 28 Javascript
javascript实用方法总结
Feb 06 Javascript
jquery滚动到顶部底部代码
Apr 20 Javascript
innerHTML中标签可以换行的方法汇总
Aug 14 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 #Javascript
vue微信分享 vue实现当前页面分享其他页面
Dec 02 #Javascript
Vue按需加载的具体实现
Dec 02 #Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 #Javascript
将jquery.qqFace.js表情转换成微信的字符码
Dec 01 #jQuery
如何让你的JS代码更好看易读
Dec 01 #Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 #Javascript
You might like
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
PHP文件及文件夹操作之创建、删除、移动、复制
2016/07/13 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
Laravel 模型使用软删除-左连接查询-表起别名示例
2019/10/24 PHP
jQuery 浮动广告实现代码
2008/12/25 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
AngularJS利用Controller完成URL跳转
2016/08/09 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
微信小程序左右滑动的实现代码
2017/12/15 Javascript
jQuery实现高级检索功能
2019/05/28 jQuery
vue框架制作购物车小球动画效果实例代码
2019/09/26 Javascript
详解Node.js使用token进行认证的简单示例
2020/05/25 Javascript
python strip()函数 介绍
2013/05/24 Python
Python算法之栈(stack)的实现
2014/08/18 Python
python中的reduce内建函数使用方法指南
2014/08/31 Python
python求crc32值的方法
2014/10/05 Python
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
python+django快速实现文件上传
2016/10/24 Python
Python实现将SQLite中的数据直接输出为CVS的方法示例
2017/07/13 Python
python列表推导式入门学习解析
2019/12/02 Python
Django的CVB实例详解
2020/02/10 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
数据管理员的自我评价分享
2013/11/15 职场文书
行政助理工作职责范本
2014/03/04 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
保安辞职申请书应该怎么写?
2019/07/15 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android