在Angular中如何使用toDoList-js教程-PHP中文網

首頁

web前端

js教程

在Angular中如何使用toDoList

亚连

Jun 22, 2018 pm 06:10 PM

angulartodolist

本篇文章主要介紹了Angular之toDoList的實作程式碼範例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

什麼是todolist?

#所謂的todolist就是把你所做的事情按順序全部列出來，然後做完一件事，就在這一項之前打勾，此時狀態就會變成已完成，todolist可以對所列的事情和已完成的事情刪除和修改，當然已完成的事情就不能修改了。
當我們拿到一個todolist的時候，首先看到的是todolist的組成，是由一個文字方塊和，清單項目構成，資料要透過控制器從文字方塊傳送到清單項目，然後在清單項目中展示出來。

話不多說，先上圖；

功能：

首先，所有的資料都是儲存在localStorage中的；其次，在文字方塊中輸入內容後，回車即可新增任務主題；可以按內容和新增時間來排序任務；可以篩選任務，分為未完成和已完成；可以一鍵刪除所有任務；在任務清單前打勾，即表示為已完成；點擊任務後面的x則會刪除這一任務；雙擊任務進入任務編輯模式；在大文本框中填寫詳細的任務計劃；

（只能在全部任務清單中勾選該任務是否完成哦0.0...）

直接上程式碼啦（註解應該寫的很清楚哦）

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

        <p ng-controller="TaskController">

           <h1 id="My-nbsp-Task-nbsp-List">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>

下面是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();

      });

   });

});

上面是我整理給大家的，希望未來會對大家有幫助。

在vue-cli中如何實作元件通訊

Vue專案最佳化需要注意哪些？

在vuejs中使用模組化的方式開發

#使用EasyUI如何綁定Json資料來源

以上是在Angular中如何使用toDoList的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr