Angular에서 toDoList를 사용하는 방법
- 亚连원래의
- 2018-06-22 18:10:451459검색
이 글에서는 주로 Angular의 toDoList 구현 코드 예제를 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라가며 함께 살펴볼까요
todolist란 무엇인가요?
일명 todolist는 자신이 한 일을 순서대로 나열하고, 한 가지 일을 마친 후에는 그 앞에 있는 확인란을 선택하면 됩니다. 이때 해당 항목은 완료됨으로 변경됩니다. Todolist는 나열된 항목을 삭제하고 수정할 수 있으며, 완료된 항목은 수정할 수 없습니다.
할 일 목록을 얻을 때 가장 먼저 보는 것은 텍스트 상자와 목록 항목으로 구성된 할 일 목록의 구성입니다. 데이터는 컨트롤러를 통해 텍스트 상자에서 목록 항목으로 전송된 후 표시되어야 합니다. 목록 항목에 있습니다.
더 이상 고민하지 말고 그림부터 시작해 보겠습니다.
기능:
우선, 모든 데이터는 localStorage에 저장됩니다. 두 번째로 텍스트 상자에 내용을 입력한 후 Enter를 눌러 작업 주제를 추가하세요. ; 작업을 콘텐츠별로 정렬하고 시간을 추가할 수 있습니다. 작업을 완료하지 않은 작업과 완료한 작업으로 나눌 수 있습니다. 작업 목록 앞에 체크 표시를 하면 완료되었습니다. x 작업을 삭제하려면 작업을 두 번 클릭하세요. 큰 텍스트 상자에 세부 작업 계획을 입력하세요.
(작업이 완료되었는지 여부만 확인할 수 있습니다. task list 0.0...)
코드로 바로 이동하세요. (댓글은 매우 명확하게 작성해야 합니다.)
<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'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='text'; reverse=!reverse">内容</button>
<button type="button" class="btn btn-success" ng-click="predicate='time'; 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=''">全部</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();
});
});
});위는 제가 모두를 위해 컴파일한 내용입니다. 앞으로 모든 사람에게 도움이 됩니다.
관련 기사:
Vue 프로젝트를 최적화할 때 주의해야 할 사항은 무엇인가요?
EasyUI를 사용하여 Json 데이터 소스를 바인딩하는 방법
위 내용은 Angular에서 toDoList를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：Vue의 이벤트버스에 대한 자세한 해석다음 기사：Vue의 이벤트버스에 대한 자세한 해석