Méthode d'implémentation de toDoList dans Angular-js tutoriel-php.cn

Méthode d'implémentation de toDoList dans Angular

小云云

Libérer： 2017-12-12 13:27:35

original

1465 Les gens l'ont consulté

Qu'est-ce qu'un todolist ?

Le soi-disant todolist consiste à lister toutes les choses que vous avez faites dans l'ordre, puis après avoir terminé une chose, cochez simplement la case avant it., à ce moment-là, le statut deviendra terminé. Le todolist peut supprimer et modifier les éléments répertoriés et les éléments terminés. Bien entendu, les éléments terminés ne peuvent pas être modifiés. Cet article présente principalement l'exemple de code d'implémentation de toDoList d'Angular. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Lorsque nous obtenons une liste de tâches, la première chose que nous voyons est la composition de la liste de tâches, qui est composée d'une zone de texte et d'éléments de liste. Les données doivent être transférées de la zone de texte aux éléments de liste via le. contrôleur, puis dans Les éléments de la liste sont affichés.

Sans plus tarder, commençons par l'image

Fonction :

Tout d'abord, toutes les données sont stockées dans localStorage ; Deuxièmement, après avoir saisi le contenu dans la zone de texte, appuyez sur Entrée pour ajouter un sujet de tâche ; les tâches peuvent être triées par contenu et par heure ajoutée ; les tâches peuvent être filtrées en tâches inachevées et terminées ; toutes les tâches peuvent être supprimées en un seul clic dans la tâche ; liste Cochez la case pour indiquer qu'elle est terminée ; cliquez sur le x après la tâche pour supprimer la tâche ; double-cliquez sur la tâche pour entrer dans le mode d'édition de la tâche ; remplissez le plan de tâche détaillé dans la grande zone de texte ; est terminé dans la liste de toutes les tâches 0.0...)

Aller directement au code (les commentaires doivent être clairement écrits)

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

Copier après la connexion

Ce qui suit est le code js :

var app = angular.module(&#39;taskList&#39;,[]);

app.controller(&#39;TaskController&#39;,function($scope , dateFilter){

   //获取缓存中的taskList数据

   var tmp = localStorage.getItem(&#39;taskList&#39;);

   //转为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 : &#39;&#39;

      });

      //此处用来清空文本框中的内容

      $scope.taskText = &#39;&#39;;

      $scope.save();

   }

   //完善任务细则

   $scope.addDesc = function(task){

      $scope.save();

      alert(&#39;任务更新成功，请努力坚持哦  :)&#39;);

   }



   //还没解决 在未完成和已完成的列表中单击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(&#39;taskList&#39; , 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(&#39;li&#39;,&#39;dblclick&#39;,function(){

      $(this).find(&#39;.taskText&#39;).slideToggle();

   });

   //全部展开或全部收起

   $(&#39;.all&#39;).click(function(){

      var _this = $(this);

      if(_this.text() == &#39;全部展开&#39;){

        $(&#39;.taskText&#39;).slideDown();

        _this.text(&#39;全部收起&#39;);

      }else{

        $(&#39;.taskText&#39;).slideUp();

        _this.text(&#39;全部展开&#39;);

      }

   });

   //确认修改描述框后隐藏

   $(&#39;.taskList&#39;).delegate(&#39;.submit&#39;,&#39;click&#39;,function(){

      var _this = $(this);

      $(this).click(function(){

        _this.parents(&#39;.taskText&#39;).slideUp();

      });

   });

   //描述框获得焦点又失去焦点后会自动隐藏

   $(&#39;.taskList&#39;).delegate(&#39;.desc&#39;,&#39;focus&#39;,function(){

      var _this = $(this);

      _this.blur(function(){

        _this.parents(&#39;.taskText&#39;).slideUp();

      });

   });

});

Copier après la connexion

Recommandations associées :

Comment utiliser les idées de programmation AngularJS

Méthode AngularJs pour vider le cache du navigateur

Comment utiliser les idées de programmation AngularJS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!