功能描述：
1). 显示Todo列表（名称，状态）
2). 可以删除，可以编辑，可以添加Todo信息
技术点描述：
1). 使用service, factory, module, component, controller, constant
开发设计：
1).
todoListController(constroller 控制器)
2).
todoListComponent(component 列表组件)
3).
todoComponent(component todo组件)
4).
todoListService(service 数据服务)
5).
todoListFactory(factory 数据工厂)
6).
TodoStatus(constant todo状态)
7).
TodoDefaultText(constant todo默认名称)
8).
TodoDefaultStatus(constant todo默认状态)
因为代码篇幅过长，所以代码事先写好如下：
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://cdn.bootcss.com/angular.js/1.5.8/angular.js"></script>
<style type="text/css" >
body, html, ul, p, h2 {
margin: 0;
padding: 0;
}
body, html {
width: 100%;
height: 100%;
background: #F2F2F2;
font-size: 12px;
}
ul {
list-style: none;
}
.title {
text-align: center;
border-bottom: 1px solid #D5D5D5;
padding: 15px 0px;
overflow: hidden;
position: relative;
}
.title a {
position: absolute;
right: 15px;
top: 0px;
font-size: 12px;
display: inline-block;
line-height: 55px;
}
.todo-list-container {
width: 600px;
height: auto;
margin: 0 auto;
background: #fff;
min-height: 300px;
overflow: hidden;
}
.todo-list-container li {
overflow: hidden;
height: 35px;
line-height: 35px;
border-bottom: 1px dashed #D5D5D5;
font-size: 12px;
margin: 0px 15px;
position: relative;
}
.todo-list-container .text {
width: 460px;
overflow: hidden;
text-overflow: ellipsis;
float: left;
}
.todo-list-container p input {
width: 95%;
}
.todo-list-container span {
float: right;
}
.todo-list-container .tip {
text-align: center;
color: gray;
font-size: 12px;
margin-top: 100px;
}
</style>
</head>
<body ng-app="myApp">
<div class="todo-list-container" ng-controller="todoListController as ctrl" >
<h2 class="title">
TodoList
<a href="javascript:void(0)" ng-click="add($event)">添加</a>
</h2>
<todo-list-componet list="list"></todo-list-componet>
</div>
<script type="text/javascript" >
const Status = {
Done: 1,
UnDo: 2
};
const myApp = angular.module("myApp", []);
myApp.constant("TodoDefaultText", "Todo事件");
myApp.constant("TodoDefaultStatus", Status.UnDo);
myApp.constant("TodoStatus", Status);
myApp.service("TodoListService", function(TodoDefaultText, TodoDefaultStatus, TodoStatus) {
const list = [{
id: 1,
text: "早上记得去买早餐",
status: Status.Done
}, {
id: 2,
text: "中午吃完饭要午睡十分钟",
status: Status.UnDo
}];
this.getList = function() {
return list;
}
this.remove = function(data) {
let list = this.getList();
for(let i=0, len=list.length; i<len; i++) {
if(list[i] == data) {
return list.splice(i, 1);
}
}
return false;
}
this.add = function(data) {
// http
data.id = +new Date();
list.unshift(data);
}
this.update = function(data) {
// http
return true;
}
this.markdone = function(data) {
data.status = TodoStatus.Done;
}
});
myApp.component("todoListComponet", {
template: `
<ul ng-if="$ctrl.list.length > 0">
<todo-component ng-repeat="item in $ctrl.list" data="item"></todo-component>
</ul>
<p ng-if="$ctrl.list.length == 0" class="tip">
暂无数据
</p>
`,
controller: ["$scope", function($scope) {
}],
bindings: {
list: "<"
}
});
myApp.component("todoComponent", {
template: `
<li >
<p ng-if="!isEditing" ng-click="edit($event)" class="text">
{{$ctrl.data.text}}
</p>
<p ng-if="isEditing" class="text">
<input type="text" ng-blur="save($event)" ng-model="$ctrl.data.text" />
</p>
<span >
<a ng-if="$ctrl.data.status==TodoStatus.UnDo" href="javascript:void(0)" ng-click="markDone($event)">done</a>
<a href="javascript:void(0)" ng-click="remove($event)">删除</a>
</span>
</li>
`,
controller: ["$scope", "TodoListService", "TodoStatus", function($scope, TodoListService, TodoStatus) {
let that = this;
$scope.isEditing = false;
$scope.remove = function() {
TodoListService.remove(this.$ctrl.data);
}
$scope.markDone = function() {
TodoListService.markdone(this.$ctrl.data);
}
$scope.edit = function() {
$scope.isEditing = true;
}
$scope.save = function() {
TodoListService.update(this.$ctrl.data);
$scope.isEditing = false;
}
$scope.TodoStatus = TodoStatus;
}],
bindings: {
data: "<"
}
});
myApp.controller("todoListController", function($scope, TodoListService, TodoFactory) {
$scope.list = TodoListService.getList();
$scope.add = function() {
console.log(TodoFactory);
TodoListService.add(TodoFactory());
}
});
myApp.factory("TodoFactory", function(TodoDefaultStatus, TodoDefaultText) {
return function getTodo() {
return {
text: TodoDefaultText,
status: TodoDefaultStatus
}
};
});
</script>
</body>
</html>
