Angular에서 toDoList 구현 방법

todolist란 무엇인가요?

todolist는 수행한 모든 작업을 순서대로 나열한 다음 한 가지 작업을 완료한 후 해당 항목을 체크하면 완료 상태가 됩니다. 나열된 항목과 완료된 항목은 삭제 및 수정이 가능하며, 물론 완료된 항목은 수정할 수 없습니다. 이번 글에서는 주로 Angular의 toDoList 구현 코드 예제를 소개합니다. 편집자는 꽤 좋다고 생각해서 지금부터 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

할 일 목록을 얻을 때 가장 먼저 보는 것은 텍스트 상자와 목록 항목으로 구성된 할일 목록의 구성입니다. 데이터는 컨트롤러를 통해 텍스트 상자에서 목록 항목으로 전송되어야 합니다. 목록 항목에 표시됩니다.

더 이상 고민하지 말고 그림부터 시작해 보겠습니다.

기능:

먼저 모든 데이터는 localStorage에 저장됩니다. 두 번째로 텍스트 상자에 내용을 입력한 후 Enter를 눌러 작업 주제를 추가하세요. ; 작업을 콘텐츠별로 정렬하고 시간을 추가할 수 있습니다. 작업을 완료하지 않은 작업과 완료한 작업으로 나눌 수 있습니다. 작업 목록 앞에 체크 표시를 하면 완료되었습니다. x 작업을 삭제하려면 작업을 두 번 클릭하세요. 큰 텍스트 상자에 세부 작업 계획을 입력하세요.

(작업이 완료되었는지 여부만 확인할 수 있습니다. task list 0.0...)

La 코드를 직접 입력하세요 (댓글은 아주 명확하게 작성해야 합니다)

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

      });

   });

});

관련 추천:

AngularJS 프로그래밍 아이디어 사용 방법

angularJ sClear 브라우저 캐싱 방법

AngularJS 프로그래밍 아이디어 사용 방법

위 내용은 Angular에서 toDoList 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!