刚开始学ng，通过todo练习初步感受到ng框架的强大功能，记录下过程中出现的几个问题：
1、使用localStorage存储数据，序列化的时候使用angular.toJson，因为ng-repeat会在数组对象内部添加$$hashkey属性，使用JSON.stringify序列化不会过滤
2、练习用的是1.4版本的ng，网上很多示例是早期的版本，语法上有不少变化，琢磨了半天
源码下载地址：http://download.csdn.net/detail/sweetsuzyhyf/8752097
引用了bootstrap3的样式文件，效果图：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>taskList</title>
<meta charset="utf-8" />
<link href="bootstrap.min.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
</head>
<body>
<div class="container" ng-app="taskList">
<div ng-controller="TaskController">
<h1>我的任务列表</h1>
<form ng-submit="addTask()">
<input type="text" class="form-control" ng-model="taskText" size="30" placeholder="添加新任务" ng-required="true" />
<div class="checkbox" ng-show="hasTask()">
<label>
<input type="checkbox" ng-model="isAllDone" ng-click="allDone()"> 标记所有为已解决
</label>
</div>
</form>
<div class="btn-toolbar" ng-show="hasTask()">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" ng-click="predicate='text'; reverse=!reverse">内容</button>
<button type="button" class="btn btn-default" ng-click="predicate='time'; reverse=!reverse">时间</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" ng-click="query.done=false">未完成</button>
<button type="button" class="btn btn-default" ng-click="query.done=true">已完成</button>
<button type="button" class="btn btn-default" ng-click="query.done=''">全部</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="done-{{task.done}}">{{task.text}}</span>
</label>
<button type="button" class="close" ng-click="removeTask(task)" data-dismiss="alert">×</button>
<span class="pull-right">{{task.time}}</span>
</div>
</li>
</ul>
<div class="count">
未完成：<span class="badge">{{count()}}</span>，已完成：<span class="badge">{{countDone()}}</span>，总数：<span class="badge">{{taskList.length}}</span>
</div>
</div>
</div>
<script src="libs/angular.js"></script>
<script src="index.js"></script>
</body>
</html>
JS：
angular.module('taskList', []).controller('TaskController', function ($scope, dateFilter) {
var tmp = localStorage.getItem('taskList');
$scope.taskList = tmp ? angular.fromJson(tmp) : [];
//统计未完成
$scope.count = function () {
var count = 0;
angular.forEach($scope.taskList, function (task) {
count += task.done ? 0 : 1;
});
return count;
};
//统计已完成
$scope.countDone = function () {
var count = 0;
angular.forEach($scope.taskList, function (task) {
count += task.done ? 1 : 0;
});
return count;
};
//标记全部完成
$scope.allDone = function () {
angular.forEach($scope.taskList, function (task) {
task.done = $scope.isAllDone;
});
$scope.save();
}
$scope.hasTask = function () {
return $scope.taskList.length > 0;
}
//新增
$scope.addTask = function () {
$scope.taskList.push({ id: $scope.taskList.length + 1, text: $scope.taskText, done: false, time: getNowTime() });
$scope.taskText = '';
$scope.save();
};
//删除
$scope.removeTask = function (todo) {
$scope.taskList.splice($scope.taskList.indexOf(todo), 1);
$scope.save();
};
//保存
$scope.save = function () {
//序列化的时候使用angular.toJson，因为ng-repeat会在对象内部添加$$hashkey属性，使用JSON.stringify序列化不会过滤
localStorage.setItem('taskList', angular.toJson($scope.taskList));
}
function getNowTime() {
return dateFilter(new Date(), 'yyyy-MM-dd HH:mm:ss');
}
});
CSS：
body {
padding: 20px 0;
background-color: #f5f5f5;
}
.container{
width:600px;
padding:20px 30px;
background-color:white;
border-radius:5px;
border: 1px solid #e5e5e5;
}
.taskList{
padding:0;
margin-top:20px;
}
.taskList li{
list-style:none;
border-bottom:1px solid #ddd;
}
.done-true{
text-decoration:line-through;
}
.close{
margin-left:10px;
}
时间： 2024-08-09 21:45:33