本篇文章給大家分享的是有關(guān)toDoList怎么在Angular中使用，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

作為一家“創(chuàng)意+整合+營銷”的成都網(wǎng)站建設(shè)機(jī)構(gòu)，我們在業(yè)內(nèi)良好的客戶口碑。創(chuàng)新互聯(lián)公司提供從前期的網(wǎng)站品牌分析策劃、網(wǎng)站設(shè)計(jì)、做網(wǎng)站、網(wǎng)站建設(shè)、創(chuàng)意表現(xiàn)、網(wǎng)頁制作、系統(tǒng)開發(fā)以及后續(xù)網(wǎng)站營銷運(yùn)營等一系列服務(wù)，幫助企業(yè)打造創(chuàng)新的互聯(lián)網(wǎng)品牌經(jīng)營模式與有效的網(wǎng)絡(luò)營銷方法,創(chuàng)造更大的價(jià)值。

首先，所有的數(shù)據(jù)都是存儲在localStorage中的；其次，文本框中輸入內(nèi)容后，回車即可添加任務(wù)主題；可以按內(nèi)容和添加時(shí)間來排序任務(wù)；可以篩選任務(wù)，分為未完成和已完成；可以一鍵刪除所有任務(wù)；在任務(wù)清單前打勾，即表示為已完成；點(diǎn)擊任務(wù)后面的x則會刪除這一條任務(wù)；雙擊任務(wù)進(jìn)入任務(wù)編輯模式；在大文本框中填寫詳細(xì)的任務(wù)計(jì)劃；

（只能在全部任務(wù)列表中勾選該任務(wù)是否完成哦 0.0...）

直接上代碼啦（注釋應(yīng)該寫的很清楚哦）

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

        <div ng-controller="TaskController">

           <h2>My Task List</h2>

           <form ng-submit="addTask()">

              <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="checkbox" ng-show="hasTask()">

                <label>

                   <input type="checkbox" ng-model="isAllDone" ng-click="allDone()" /> 標(biāo)記所有為以解決

                </label>

              </div>

           </form>

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

              <div class="btn-group">

                <button type="button" class="btn btn-success" ng-click="predicate='text'; reverse=!reverse">內(nèi)容</button>

                <button type="button" class="btn btn-success" ng-click="predicate='time'; reverse=!reverse">時(shí)間</button>

              </div>

              <div 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=''">全部</button>

              </div>

              <div class="btn-group">

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

              </div>

              <div class="btn-group">

                <button type="button" class="btn btn-danger" ng-click="removeAll()">刪除所有任務(wù)</button>

              </div>

           </div>

           <ul class="taskList">

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

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

                </div>

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

                </div>

              </li>

           </ul>

           <div class="count">

              未完成：<span class="badge">{{count()}}</span>&nbsp;&nbsp;&nbsp;已完成：<span class="badge">{{countDone()}}</span>&nbsp;&nbsp;&nbsp;總數(shù)：<span class="badge">{{taskList.length}}</span>

           </div>

        </div>

      </div>

下面是js代碼：

var app = angular.module('taskList',[]);

app.controller('TaskController',function($scope , dateFilter){

   //獲取緩存中的taskList數(shù)據(jù)

   var tmp = localStorage.getItem('taskList');

   //轉(zhuǎn)為json數(shù)據(jù)進(jìn)行操作

   $scope.taskList = tmp ? angular.fromJson(tmp) : [];

   //新增任務(wù)

   $scope.addTask = function(){

      $scope.taskList.push({

        id : $scope.taskList.length + 1,

        text : $scope.taskText,

        done : false,

        time : getNowTime(),

        desc : ''

      });

      //此處用來清空文本框中的內(nèi)容

      $scope.taskText = '';

      $scope.save();

   }

   //完善任務(wù)細(xì)則

   $scope.addDesc = function(task){

      $scope.save();

      alert('任務(wù)更新成功，請努力堅(jiān)持哦  :)');

   }



   //還沒解決 在未完成和已完成的列表中單擊checkbox時(shí)，結(jié)果不會保存到緩存中去的情況



   //從緩存中刪除任務(wù)

   $scope.removeTask = function(todo){

      $scope.taskList.splice($scope.taskList.indexOf(todo), 1);

      $scope.save();

   }

   //從緩存中刪除所有任務(wù)

   $scope.removeAll = function(){

      $scope.taskList = [];

      localStorage.clear();

   }

   //新增任務(wù)后還要把任務(wù)存入緩存中

   $scope.save = function(){

      localStorage.setItem('taskList' , angular.toJson($scope.taskList));

   }

   //獲取當(dāng)前時(shí)間

   function getNowTime(){

      return dateFilter(new Date() , "yyyy-MM-dd HH:mm:ss");

   }

   $scope.hasTask = function(){

      return $scope.taskList.length > 0;

   }

   //標(biāo)記為全部完成

   $scope.allDone = function(){

      angular.forEach($scope.taskList , function(task){

        task.done = $scope.isAllDone;

      });

      $scope.save();

   }

   //統(tǒng)計(jì)已完成的任務(wù)

   $scope.countDone = function(){

      var count = 0;

      angular.forEach($scope.taskList , function(task){

        count += task.done ? 1 : 0;

      });

      return count;

   }

   //統(tǒng)計(jì)未完成的任務(wù)

   $scope.count = function(){

      var count = 0;

      angular.forEach($scope.taskList , function(task){

        count += task.done ? 0 : 1;

      });

      return count;

   }

});

$(function(){

   //給未來元素加雙擊事件,雙擊任務(wù)顯示或隱藏任務(wù)細(xì)節(jié)

   $(".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('全部展開');

      }

   });

   //確認(rèn)修改描述框后隱藏

   $('.taskList').delegate('.submit','click',function(){

      var _this = $(this);

      $(this).click(function(){

        _this.parents('.taskText').slideUp();

      });

   });

   //描述框獲得焦點(diǎn)又失去焦點(diǎn)后會自動隱藏

   $('.taskList').delegate('.desc','focus',function(){

      var _this = $(this);

      _this.blur(function(){

        _this.parents('.taskText').slideUp();

      });

   });

});

以上就是toDoList怎么在Angular中使用，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享題目：toDoList怎么在Angular中使用
網(wǎng)站網(wǎng)址：http://jinyejixie.com/article20/pdcoco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、電子商務(wù)、品牌網(wǎng)站設(shè)計(jì)、商城網(wǎng)站、云服務(wù)器、營銷型網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)