什么是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(); }); });});到這就大功告成啦， 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
