Implementierungsmethode von toDoList in Angular

Was ist ein Todolist?

Der sogenannte Todolist listet alle Dinge, die Sie getan haben, der Reihe nach auf und nachdem Sie eine Sache erledigt haben, aktivieren Sie einfach das Kästchen davor Zu diesem Zeitpunkt wird der Todolist die aufgelisteten Dinge löschen und ändern. Natürlich können die abgeschlossenen Dinge nicht geändert werden. In diesem Artikel wird hauptsächlich das Implementierungscodebeispiel von Angulars toDoList vorgestellt. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Wenn wir eine Todo-Liste erhalten, sehen wir als Erstes die Zusammensetzung der Todo-Liste, die aus einem Textfeld und Listenelementen besteht. Die Daten müssen über das Textfeld an die Listenelemente übertragen werden Controller und dann in Die Listenelemente werden angezeigt.

Beginnen wir ohne weiteres mit dem Bild

Funktion:

Zunächst werden alle Daten im localStorage gespeichert; Zweitens: Drücken Sie nach der Eingabe von Inhalten in das Textfeld die Eingabetaste, um Aufgaben nach Inhalt zu sortieren. Durch das Hinzufügen von Zeit können alle Aufgaben in der Aufgabe gelöscht werden Klicken Sie auf das Kästchen, um anzuzeigen, dass die Aufgabe abgeschlossen ist. Doppelklicken Sie auf die Aufgabe, um den detaillierten Aufgabenplan in das große Textfeld einzugeben ist in der Liste aller Aufgaben 0.0 abgeschlossen...)

Gehe direkt zum Code (die Kommentare sollten klar geschrieben sein)

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

Das Folgende ist der 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();

      });

   });

});

Verwandte Empfehlungen:

So verwenden Sie AngularJS-Programmierideen

AngularJs-Methode zum Leeren des Browser-Cache

So verwenden Sie AngularJS-Programmierideen

Das obige ist der detaillierte Inhalt vonImplementierungsmethode von toDoList in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!