Angular之toDoList的实现代码示例
程序员文章站
2022-03-07 10:36:48
什么是todolist?
所谓的todolist就是把你所做的事情按顺序全部列出来，然后做完一件事，就在这一项之前打勾，此时状态就会变成已完成，todolist可...
什么是todolist?
所谓的todolist就是把你所做的事情按顺序全部列出来，然后做完一件事，就在这一项之前打勾，此时状态就会变成已完成，todolist可以对所列的事情和已完成的事情删除和修改，当然已完成的事情就不能修改了。
当我们拿到一个todolist的时候，首先看到的是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();
});
});
});
到这就大功告成啦， 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。