Implementation method of toDoList in Angular

What is a todolist?

The so-called todolist is to list all the things you have done in order, and then after you finish one thing, just check the box before it. , at this time the status will become completed. The todolist can delete and modify the listed things and completed things. Of course, the completed things cannot be modified. This article mainly introduces the implementation code example of Angular's toDoList. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

When we get a todolist, the first thing we see is the composition of the todolist, which is composed of a text box and list items. The data must be transferred from the text box to the list items through the controller, and then in The list items are displayed.

Without further ado, let’s start with the picture;

Function:

First of all, all data is stored in localStorage ; Secondly, after entering content in the text box, press Enter to add task topics; tasks can be sorted by content and adding time; tasks can be filtered into unfinished and completed tasks; all tasks can be deleted with one click; in the task list Check the box to indicate it has been completed; click the x after the task to delete the task; double-click the task to enter the task editing mode; fill in the detailed task plan in the large text box; Check whether the task is completed in the all task list 0.0...)

Go directly to the code (the comments should be written very clearly)

<p class="container" ng-app="taskList">

        <p 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&#39;s start with an Enter !" />

              <p class="checkbox" ng-show="hasTask()">

                <label>

                   <input type="checkbox" ng-model="isAllDone" ng-click="allDone()" /> 标记所有为以解决

                </label>

              </p>

           </form>

           <p class="btn-toolbar" ng-show="hasTask()">

              <p class="btn-group">

                <button type="button" class="btn btn-success" ng-click="predicate=&#39;text&#39;; reverse=!reverse">内容</button>

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

              </p>

              <p 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=&#39;&#39;">全部</button>

              </p>

              <p class="btn-group">

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

              </p>

              <p class="btn-group">

                <button type="button" class="btn btn-danger" ng-click="removeAll()">删除所有任务</button>

              </p>

           </p>

           <ul class="taskList">

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

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

                </p>

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

                </p>

              </li>

           </ul>

           <p class="count">

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

           </p>

        </p>

      </p>

The following is the js code:

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

      });

   });

});

Related recommendations:

How to Using AngularJS programming ideas

angularJs method to clear browser cache

How to use AngularJS programming ideas

The above is the detailed content of Implementation method of toDoList in Angular. For more information, please follow other related articles on the PHP Chinese website!