Angular之toDoList的实现代码示例

Angular之toDoList的实现代码示例

什么是todolist?

所谓的todolist就是把你所做的事情按顺序全部列出来，然后做完一件事，就在这一项之前打勾，此时状态就会变成已完成，todolist可以对所列的事情和已完成的事情删除和修改，当然已完成的事情就不能修改了。

当我们拿到一个todolist的时候，首先看到的是todolist的组成，是由一个文本框和，列表项构成，数据要通过控制器从文本框传送到列表项，然后在列表项展示出来。

话不多说，先上图；

功能：

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

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

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

标记所有为以解决

内容

时间

未完成

已完成

全部

全部展开

删除所有任务

{{task.text}}

{{task.time}}

submit

未完成：{{count()}}   已完成：{{countDone()}}   总数：{{taskList.length}}

下面是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 ?pFNVpge; 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();

});

});

});

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。