什么是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的功能还不够完善，双击修改该事项，和全部删除在后面会更新.......