In diesem Artikel wird hauptsächlich das Implementierungscodebeispiel von Angulars toDoList vorgestellt. Der Herausgeber findet es recht gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und werfen wir einen Blick darauf.
Was ist ein Todolist?
Der sogenannte Todolist listet alle Dinge auf, die Sie in der richtigen Reihenfolge erledigt haben Dann vervollständigen Sie einfach diesen Punkt und der Status ändert sich in „Abgeschlossen“. Die aufgelisteten und abgeschlossenen Dinge können natürlich nicht geändert werden.
Wenn wir eine Todo-Liste erhalten, sehen wir als Erstes die Zusammensetzung der Todo-Liste, die aus einem Textfeld und Listenelementen besteht. Die Daten müssen über den Controller vom Textfeld zum Listenelement übertragen werden dann wird auf dem Listenelement angezeigt.
Beginnen wir ohne weiteres mit dem Bild
Funktion:
Zunächst werden alle Daten im localStorage gespeichert; Zweitens: Drücken Sie nach der Eingabe von Inhalten in das Textfeld die Eingabetaste, um Aufgaben nach Inhalt zu sortieren. Durch das Hinzufügen von Zeit können alle Aufgaben in der Aufgabenliste gelöscht werden Aktivieren Sie das Kontrollkästchen, um anzuzeigen, dass die Aufgabe abgeschlossen ist. Klicken Sie doppelt auf die Aufgabe, um den detaillierten Aufgabenplan in das große Textfeld einzugeben abgeschlossen in der Liste aller Aufgaben 0,0...)
Gehe direkt zum Code (die Kommentare sollten klar geschrieben sein)
<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>Nach dem Login kopieren
Das Folgende ist der js-Code:
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();
});
});
});Nach dem Login kopieren
Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.
Verwandte Artikel:
So implementieren Sie Komponentenkommunikation in Vue-Cli
Worauf sollten Sie bei der Optimierung von Vue-Projekten achten?
Modular in Vuejs entwickelt
So binden Sie eine Json-Datenquelle mit EasyUI
Das obige ist der detaillierte Inhalt vonSo verwenden Sie toDoList in Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
