AngularJS实现todomvc

准备工作

参考http://todomvc.com/
todomvc-app-template下载：在相应的位置使用git复制项目git clone https://github.com/tastejs/todomvc-app-template.git
下载完后，在项目文件夹内npm install下载包
安装好后，可以进行预览。但是控制台有找不到文件的错误

learn.json用于展现官方的说明栏，使用 npm uninstall todomvc-common --save来卸载
在index.html中删除末尾处 及head中的

Angular 实现

模型准备
在项目文件夹中安装AngularJSnpm install angular --save
在index.html中引入AngularJS
在js/app.js中编写代码。默认传入的window对象用不到，改成angular对象。默认使用严格校验模式。
初始化，建立模块与控制器，并初始化文本列表的Model

(function (angular) {
    'use strict';
    //应用程序的主要的模块
    var myApp = angular.module('MyTodoMvc', []);
    // 注册一个主要的控制器
    myApp.controller('MainController', ['$scope', function($scope) {    
    // 文本框需要一个模型
    $scope.text = '';

    // 任务列表也需要一个
    // 每一个任务的结构 { id: 1, text: '学习', completed: true }
    $scope.todos = [{  id: 1,  text: '学习', completed: false}, 
                 { id: 2, text: '睡觉', completed: false  }, 
                 { id: 3, text: '打豆豆', completed: true }, ];
        }] 
    )
})(angular);

将模块与控制器引入到index.html

将输入框绑定model
将li用ng-repeat来显示数据，将checkbox建立model，label用表达式来输出，edit时，model显示与label一致。当todo.completed为true时，ng-class为completed

                    

                        

                            
                            {{todo.text}}
                            
                        
                        
                    

修改item总数{{todos.length}} item left
实现添加功能
首先在controller加上add函数，add功能todos数组中添加1项，ID用数组长度+1，$scope.todos.length + 1，text为输入的text模型的值，添加后，将text清空

    $scope.add = function() {
      $scope.todos.push({
        // 自动增长
        id: $scope.todos.length + 1,
        // 由于$scope.text是双向绑定的，add同时肯定可以同他拿到界面上的输入
        text: $scope.text,
        completed: false
      });
      // 添加后，清空文本框
      $scope.text = '';
    };

将input放到form中，回车后进行表单提交，通过ng-submit实现add函数

实现删除功能
添加remove功能，遍历数组找到id，通过splice删除（从第i位起，删除1位）

    $scope.remove = function(id) {
      // 删除谁
      for (var i = 0; i < $scope.todos.length; i++) {
        if ($scope.todos[i].id === id) {
          $scope.todos.splice(i, 1);
          break;
        }
      }
    };

在htmel中添加ng-click指向remove
由于删除后再添加，上面将id设成数组长度的方法会导致id重复，我们可以用随机数来解决,将add方法中id更新成id: Math.random(),，也可以添加个getid的方法，迭代获取

    function getId() {
      var id = Math.random(); // 1 2
      for (var i = 0; i < $scope.todos.length; i++) {
        if ($scope.todos[i].id === id) {
          id = getId();
          break;
        }
      }
      return id;
    }

清空功能
建立一个新数值，将没有completed的项放到这个数组中，然后将todos 数组指向这个新数组，就实现了clear completed功能。并实现检查是否有完成项的功能

    $scope.clear = function() {
      var result = [];
      for (var i = 0; i < $scope.todos.length; i++) {
        if (!$scope.todos[i].completed) {
          result.push($scope.todos[i]);
        }
      }
      $scope.todos = result;
    };
    // 是否有已经完成的
    $scope.existCompleted = function() {
      // 该函数一定要有返回值
      for (var i = 0; i < $scope.todos.length; i++) {
        if ($scope.todos[i].completed) {
          return true;
        }
      }
      return false;
    };

在button中引入这两个function Clear completed
双击编辑
当前currentEditingId初始值设为-1，即一个不可能存在的id，当编辑时，将其设为当前行的id，save方法停止编辑，将currentEditingId设为-1

    // 当前编辑哪个元素
    $scope.currentEditingId = -1;
    $scope.editing = function(id) {
      $scope.currentEditingId = id;
    };
    $scope.save = function() {
      $scope.currentEditingId = -1;
    };

再li的ng-class中加上editing:todo.id===currentEditingId
使得text响应双击事件{{todo.text}}
将input edit用form包起来实现回车触发save