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 使用 NodeList需要注意的问题
Mar 04 Javascript
jquery实现当滑动到一定位置时固定效果
Jun 17 Javascript
jquery处理json对象
Nov 03 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
Javascript 获取鼠标当前的位置实现方法
Oct 27 Javascript
为输入框加入数字js校验代码分享
Nov 02 Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
利用不到200行代码写一款属于你自己的js类库
Jul 08 Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
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
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
php生成短网址示例
2014/05/05 PHP
php mb_substr()函数截取中文字符串应用示例
2014/07/29 PHP
[原创]php获取数组中键值最大数组项的索引值
2015/03/17 PHP
php实现多城市切换特效
2015/08/09 PHP
十大使用PHP框架的理由
2015/09/26 PHP
PHP的APC模块实现上传进度条
2015/10/27 PHP
Zend Framework动作助手Url用法详解
2016/03/05 PHP
django中的ajax组件教程详解
2018/10/18 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
jQuery实现弹出窗口弹出div层的实例代码
2017/01/09 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
vue.js实现插入数值与表达式的方法分析
2018/07/06 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
js使用swiper实现层叠轮播效果实例代码
2018/12/12 Javascript
微信小程序日历弹窗选择器代码实例
2019/05/09 Javascript
Vue中computed及watch区别实例解析
2020/08/01 Javascript
Python的函数嵌套的使用方法
2014/01/24 Python
python3模拟百度登录并实现百度贴吧签到示例分享(百度贴吧自动签到)
2014/02/24 Python
Python之eval()函数危险性浅析
2014/07/03 Python
Python线程指南详细介绍
2017/01/05 Python
python3实现UDP协议的服务器和客户端
2017/06/14 Python
Python 快速实现CLI 应用程序的脚手架
2017/12/05 Python
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
Python二维码生成识别实例详解
2019/07/16 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
Pycharm Git 设置方法
2020/09/15 Python
JDK安装目录下有哪些内容
2014/08/25 面试题
大学生职业规划论文
2014/01/11 职场文书
天地会口号
2014/06/17 职场文书
宣传委员竞选稿
2015/11/19 职场文书
导游词之藏龙百瀑景区
2019/12/30 职场文书