• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

Angular之toDoList的实现代码示例

angularjs 搞代码 4年前 (2021-12-31) 54次浏览 已收录 0个评论

本篇文章主要介绍了Angular之toDoList的实现代码示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

什么是todolist?

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

话不多说,先上图;

功能:

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

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

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

 <div class="container"> <div> <h1>My Task List</h1> <div class="checkbox"> <label>  标记所有为以解决 </label></div><div class="btn-toolbar"> <div class="btn-group"> <button type="button" class="btn btn-success">内容</button><button type="button" class="btn btn-success">时间</button></div><div class="btn-group" role="group"> <button type="button" class="btn btn-warning">未完成</button><button type="button" class="btn btn-warning">已完成</button><button type="button" class="btn btn-warning">全部</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">删除所有任务</button></div></div><ul class="taskList"> <li> <div class="checkbox"> <label> <span class="text done-{{task.done}}">{{task.text}}</span></label><button type="button" class="close">×</button><span class="pull-right time">{{task.time}}</span></div><div class="taskText">  <textarea class="form-control desc" rows="4" cols="73"></textarea><button class="btn btn-primary btn-sm submit" type="submit">submit</button></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 <span style="color:transparent">来源gaodai#ma#com搞*代#码网</span>, 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(); }); }); }); 

到这就大功告成啦, 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持gaodaima搞代码网

以上就是Angular之toDoList的实现代码示例的详细内容,更多请关注gaodaima搞代码网其它相关文章!


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Angular之toDoList的实现代码示例

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址