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 相关文章推荐
JQuery中根据属性或属性值获得元素(6种情况获取方法)
Jan 17 Javascript
javascript检测对象中是否存在某个属性判断方法小结
May 19 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 Javascript
Jquery chosen动态设置值实例介绍
Aug 08 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
Jquery实现的简单轮播效果【附实例】
Apr 19 Javascript
jQuery Mobile框架中的表单组件基础使用教程
May 17 Javascript
Javascript实现通过选择周数显示开始日和结束日的实现代码
May 30 Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 Javascript
vue3.0 CLI - 2.1 -  component 组件入门教程
Sep 14 Javascript
vue改变对象或数组时的刷新机制的方法总结
Apr 24 Javascript
在vue-cli中引入lodash.js并使用详解
Nov 13 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
写出高质量的PHP程序
2012/02/04 PHP
php取得字符串首字母的方法
2015/03/25 PHP
PHP访问数据库集群的方法小结
2016/03/14 PHP
PHP设计模式之适配器模式定义与用法详解
2018/04/03 PHP
php实现的简单多进程服务器类完整示例
2020/02/01 PHP
Javascript在IE和FireFox中的不同表现简析
2012/12/03 Javascript
ExtJS4 表格的嵌套 rowExpander应用
2014/05/02 Javascript
关于Iframe父页面与子页面之间的相互调用
2016/11/22 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
解决nuxt 自定义全局方法,全局属性,全局变量的问题
2020/11/05 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
[00:52]DOTA2国际邀请赛
2020/02/21 DOTA
Python的另外几种语言实现
2015/01/29 Python
mac系统安装Python3初体验
2018/01/02 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
关于python字符串方法分类详解
2019/08/20 Python
Python如何通过Flask-Mail发送电子邮件
2020/01/29 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
Pycharm如何自动生成头文件注释
2020/11/14 Python
加拿大最大的五金、家居装修和园艺产品商店:RONA
2017/01/27 全球购物
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
C,C++的几个面试题小集
2013/07/13 面试题
AURALog面试题软件测试方面
2013/10/22 面试题
警察思想汇报
2014/01/04 职场文书
女娲补天教学反思
2014/02/05 职场文书
2014学年自我鉴定
2014/02/23 职场文书
业务员简历自我评价
2014/03/06 职场文书
公司管理建议书范文
2014/03/12 职场文书
提拔干部考察材料
2014/05/26 职场文书
计算机求职信
2014/07/02 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
JavaScript parseInt0.0000005打印5原理解析
2022/07/23 Javascript