Angular之toDoList的实现代码示例

Valonia ·

更新时间:2024-11-10

· 669 次阅读

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

到这就大功告成啦，以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持软件开发网。

todolist 示例 angular

1024 个赞