什么是todolist?

所謂的todolist就是把你所做的事情按順序全部列出來，然后做完一件事，就在這一項之前打勾，此時狀態就會變成已完成，todolist可以對所列的事情和已完成的事情刪除和修改，當然已完成的事情就不能修改了。
當我們拿到一個todolist的時候，首先看到的是todolist的組成，是由一個文本框和，列表項構成，數據要通過控制器從文本框傳送到列表項，然后在列表項展示出來。

todolist

todolist的實現？

1、首先要定義一個應用，創建一個模塊，創建一個控制器。

          var todos = angular.module("todos",[]);
          todos.controller("TodosController",["$scope",function ($scope) {

          }]);

2、接下來要做的就是，當在文本框輸入內容，單擊鍵盤上回車時，讓它展示在列表項里，這是就要創建兩個數組todos，doneTodos，一個用來保存待完成的事件，另外一個數組保存已完成的事件，也就是說在內容輸入完成之后，單擊回車，將內容保存在todos這個數組中，并顯示出來。
這時就要用到表單事件，使用ng-submit將表單中的數據添加到數組中

    <header class="header">
                <h1>todos</h1>
                <form ng-submit="add()">
                    <input class="new-todo" ng-model="text" placeholder="What needs to be done?" autofocus>
                </form>
    </header>

              $scope.add = function () {
//                push()函數向數組中添加元素
                  $scope.todos.push({text:$scope.text,flag:$scope.flag});
                  $scope.text = "";
              };

3、當向列表項添加數據以后，就可以對該事件進行狀態的切換，從待完成狀態轉變為已完成狀態，并且改變checkbox的狀態。這一步其實就是把數據從一個數組取出來然后放到另外一個數組的過程。
其中一個li標簽表示一個事項的狀態：

                 <ul class="todo-list">
                    <li ng-repeat="(key,todo) in todos">
                        <div class="view">
                            <input class="toggle" type="checkbox" ng-checked="{{todo.flag}}" ng-click="done(key)">
                            <label>{{todo.text}}</label>
                            <button class="destroy" ng-click="delete(todos,key)"></button>
                        </div>
                        <input class="edit" value="Create a TodoMVC template" >
                    </li>
                    <!--<li><h6>已完成</h6></li>-->
                    <li ng-repeat="(key,todo) in doneTodos" class="completed">
                        <div class="view">
                            <input class="toggle" type="checkbox" ng-checked="{{todo.flag}}" ng-click="back(key)">
                            <label>{{todo.text}}</label>
                            <button class="destroy" ng-click="delete(doneTodos,key)"></button>
                        </div>
                        <input class="edit" value="Rule the web" >
                    </li>
                </ul>

//            改變狀態，從待完成到已完成，從todos數組去除一個元素，添加到doneTodos數組中。
              $scope.done = function (key) {
                 var todo = $scope.todos.splice(key,1)[0];
                 todo.flag = true;
                 $scope.doneTodos.push(todo);
              };
//            從已完成狀態轉變為待完成狀態，從doneTodos數組去除一個元素，添加到todos數組中。
              $scope.back = function (key) {
                  var todo = $scope.doneTodos.splice(key,1)[0];
                  todo.flag = false;
                  $scope.todos.push(todo);
              }

4、對事項的刪除，就是從兩個數組中任意取出一個數據然后將該元素刪除，還是對兩個數組的操作,這里需要傳遞兩個參數，一個時數組的索引，另一個就是所刪除的個數。

              $scope.delete = function (todos,key) {
//            splice()函數從數組中刪除一個元素，兩個參數，第一個表示數組的索引下標，第二個表示所刪除元素的個數
                  todos.splice(key,1);
              }

展示

當然這個todolist的功能還不夠完善，雙擊修改該事項，和全部刪除在后面會更新.......