Angular之toDoList的实现代码示例

什么是todolist?

所谓的todolist就是把你所做的事情按顺序全部列出来，然后做完一件事，就在这一项之前打勾，此时状态就会变成已完成，todolist可以对所列的事情和已完成的事情删除和修改，当然已完成的事情就不能修改了。当我们拿到一个todolist的时候，首先看到的是todolist的组成，是由一个文本框和，列表项构成，数据要通过控制器从文本框传送到列表项，然后在列表项展示出来。

话不多说，先上图；

功能：

首先，所有的数据都是存储在localStorage中的；其次，文本框中输入内容后，回车即可添加任务主题；可以按内容和添加时间来排序任务；可以筛选任务，分为未完成和已完成；可以一键删除所有任务；在任务清单前打勾，即表示为已完成；点击任务后面的x则会删除这一条任务；双击任务进入任务编辑模式；在大文本框中填写详细的任务计划；

（只能在全部任务列表中勾选该任务是否完成哦 0.0...）

直接上代码啦（注释应该写的很清楚哦）

    <div ng-controller="TaskController"&gt;

       <h1>My Task List</h1>

       <form ng-submit="addTask()"&gt;

          <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="check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>" ng-show="hasTask()"&gt;

            <label>

               <input type="checkbox" ng-model="isAllDone" ng-click="allDone()" /> <a href="/tag/biaoji/" target="_blank" class="keywords">标记</a>所有为以<a href="/tag/jiejue/" target="_blank" class="keywords">解决</a>

            </label>

          </div>

       </form>

       <div class="btn-toolbar" ng-show="hasTask()"&gt;

          <div class="btn-group"&gt;

            <button type="button" class="btn btn-success" ng-click="predicate='text'; reverse=!reverse"&gt;<a href="/tag/neirong/" target="_blank" class="keywords">内容</a></button>

            <button type="button" class="btn btn-success" ng-click="predicate='time'; reverse=!reverse"&gt;时间</button>

          </div>

          <div class="btn-group" role="group"&gt;

            <button type="button" class="btn btn-warning" ng-click="query.done=false"&gt;未完成</button>

            <button type="button" class="btn btn-warning" ng-click="query.done=true"&gt;已完成</button>

            <button type="button" class="btn btn-warning" ng-click="query.done=''"&gt;全部</button>

          </div>

          <div class="btn-group"&gt;

            <button type="button" class="btn btn-primary all"&gt;全部展开</button>

          </div>

          <div class="btn-group"&gt;

            <button type="button" class="btn btn-danger" ng-click="removeAll()"&gt;<a href="/tag/shanchu/" target="_blank" class="keywords">删除</a>所有任务</button>

          </div>

       </div>

       <ul class="taskList"&gt;

          <li ng-repeat="task in taskList | filter:query | orderBy:predicate:reverse"&gt;

            <div class="check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>"&gt;

               <label>

             <input type="check<a href="/tag/Box/" target="_blank" class="keywords">Box</a>" ng-model="task.done" ng-click="save()"&gt;<span class="text done-{{task.done}}"&gt;{{task.text}}</span>

           </label>

               <button type="button" class="close" ng-click="removeTask(task)" data-dismiss="alert"&gt;×</button>

               <span class="pull-right time"&gt;{{task.time}}</span>

            </div>

            <div class="taskText"&gt;

               <form>

                  <textarea ng-model="task.desc" class="form-control desc" rows="4" cols="73" <a href="/tag/required/" target="_blank" class="keywords">required</a>="<a href="/tag/required/" target="_blank" class="keywords">required</a>"&gt;</textarea>

                  <button ng-click="addDesc(task)" class="btn btn-primary btn-sm submit" type="submit"&gt;submit</button>

               </form>

            </div>

          </li>

       </ul>

       <div class="count"&gt;

          未完成：<span class="badge"&gt;{{count()}}</span>已完成：<span class="badge"&gt;{{countDone()}}</span>总数：<span class="badge"&gt;{{taskList.length}}</span>

       </div>

    </div>

  </div></pre>

下面是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的实现代码示例

什么是todolist?

猜你在找的JavaScript相关文章