angularjs初學之todoList練習，angularjstodolist
剛開始學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>
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;}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
