angularjs初学之todoList练习

刚开始学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：

    
    
    
    
    


    

        

            
我的任务列表
            

                
                

                    
                         标记所有为已解决
                    
                
            
            

                

                    内容
                    时间
                
                

                    未完成
                    已完成
                    全部
                
            
            

                

                    

                        
                            {{task.text}}
                        
                        ×
                        {{task.time}}
                    
                
            
            

                未完成：{{count()}}，已完成：{{countDone()}}，总数：{{taskList.length}}
            
        
    

    
    

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;
}