Angular之toDoList的实现代码示例

<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>

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();      });   });});