準備工作
參考http://todomvc.com/
todomvc-app-template下載：在相應的位置使用git復制項目git clone https://github.com/tastejs/todomvc-app-template.git
下載完后兔毙，在項目文件夾內npm install下載包
安裝好后棵譬，可以進行預覽。但是控制臺有找不到文件的錯誤
learn.json用于展現(xiàn)官方的說明欄，使用
npm uninstall todomvc-common --save來卸載在index.html中刪除末尾處
<script src="node_modules/todomvc-common/base.js"></script>及head中的<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
Angular 實現(xiàn)
模型準備
在項目文件夾中安裝AngularJSnpm install angular --save
在index.html中引入AngularJS <script src="node_modules/angular/angular.js"></script>
在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
<body ng-app="MyTodoMvc">
<section class="todoapp" ng-controller="MainController">
將輸入框綁定model<input class="new-todo" placeholder="What needs to be done?" ng-model="text" autofocus>
將li用ng-repeat來顯示數(shù)據(jù)品山，將checkbox建立model胆建，label用表達式來輸出，edit時肘交，model顯示與label一致笆载。當todo.completed為true時，ng-class為completed
<li ng-repeat="todo in todos" ng-class="{completed:todo.completed}">
<div class="view">
<input class="toggle" type="checkbox" ng-model="todo.completed">
<label>{{todo.text}}</label>
<button class="destroy"></button>
</div>
<input class="edit" ng-model="todo.text">
</li>
修改item總數(shù)<span class="todo-count"><strong>{{todos.length}}</strong> item left</span>
實現(xiàn)添加功能
首先在controller加上add函數(shù)涯呻，add功能todos數(shù)組中添加1項凉驻，ID用數(shù)組長度+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實現(xiàn)add函數(shù)
<form ng-submit="add()">
<input class="new-todo" placeholder="What needs to be done?" ng-model="text" autofocus>
</form>
實現(xiàn)刪除功能
添加remove功能咽笼，遍歷數(shù)組找到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<button class="destroy" ng-click="remove(todo.id)"></button>
由于刪除后再添加剑刑，上面將id設成數(shù)組長度的方法會導致id重復，我們可以用隨機數(shù)來解決,將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;
}
清空功能
建立一個新數(shù)值，將沒有completed的項放到這個數(shù)組中杨伙，然后將todos 數(shù)組指向這個新數(shù)組，就實現(xiàn)了clear completed功能萌腿。并實現(xiàn)檢查是否有完成項的功能
$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;
};
// 是否有已經(jīng)完成的
$scope.existCompleted = function() {
// 該函數(shù)一定要有返回值
for (var i = 0; i < $scope.todos.length; i++) {
if ($scope.todos[i].completed) {
return true;
}
}
return false;
};
在button中引入這兩個function <button class="clear-completed" ng-click="clear()" ng-show="existCompleted()">Clear completed</button>
雙擊編輯
當前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響應雙擊事件<label ng-dblclick="editing(todo.id)">{{todo.text}}</label>
將input edit用form包起來實現(xiàn)回車觸發(fā)save
<form ng-submit="save()">
<input class="edit" ng-model="todo.text" ng-blur="save()">
</form>
