本篇文章主要介紹了Angular之toDoList的實作程式碼範例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧
什麼是todolist?
#所謂的todolist就是把你所做的事情按順序全部列出來，然後做完一件事，就在這一項之前打勾，此時狀態就會變成已完成，todolist可以對所列的事情和已完成的事情刪除和修改，當然已完成的事情就不能修改了。
當我們拿到一個todolist的時候，首先看到的是todolist的組成，是由一個文字方塊和，清單項目構成，資料要透過控制器從文字方塊傳送到清單項目，然後在清單項目中展示出來。
話不多說，先上圖；
功能：
首先，所有的資料都是儲存在localStorage中的；其次，在文字方塊中輸入內容後，回車即可新增任務主題；可以按內容和新增時間來排序任務；可以篩選任務，分為未完成和已完成；可以一鍵刪除所有任務；在任務清單前打勾，即表示為已完成；點擊任務後面的x則會刪除這一任務；雙擊任務進入任務編輯模式；在大文本框中填寫詳細的任務計劃；
（只能在全部任務清單中勾選該任務是否完成哦0.0...）
直接上程式碼啦（註解應該寫的很清楚哦）
My Task List
{{task.time}}
未完成：{{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 ? 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(); }); }); });
上面是我整理給大家的，希望未來會對大家有幫助。
相關文章：
以上是在Angular中如何使用toDoList的詳細內容。更多資訊請關注PHP中文網其他相關文章！
