demo497.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body ng-app="MyToDoMvc"> <section class="todoapp" ng-controller="MainController"> <header class="header"> <h1>todos</h1> <form ng-submit='add()'> <input class="new-todo" placeholder="what needs to be done" ng-model="text" autofocus> </form> </header> <!-- <input class="new-todo" placeholder="what needs to be done" ng-model="text" autofocus> --> <section class="main"> <input class="toggle-all" type="checkbox"> <label for="toggle-all">Mark all as complete</label> <ul class="todo-list"> <li ng-repeat="todo in todos" ng-class={completed:todo.completed,editing:todo.id===currentEditimgId} data-id="{{todo.id}}"> <div class="view"> <input class="toggle" type="checkbox" ng-model="todo.completed"> <label ng-dblclick="editing(todo.id)">{{todo.text}}</label> <button class="destroy" ng-click="remove(todo.id)">删除</button> </div> <form ng-submit="save()"> <input type="edit" ng-model="todo.text"> </form> </li> <!-- <li> <div class="view"> <input class="toggle" type="checkbox"> <label>Buy a unicorn</label> <button class="destroy"></button> </div> <input type="edit" value="Rule the web"> </li> --> </ul> </section> <footer class="footer"> <span class="todo-count"><strong>{{todos.length}}</strong>item left</span> <button class="clear-completed" ng-click="clear()" ng-show="existCompleted()">clear</button> </footer> </section> <script src="./node_modules/angular/angular.js"></script> <script src="./js/mvc.js"></script> <script> </script> </body> </html>.mvc.js (function(angular) { 'use strict'; /* 应用程序主要的模块 */ var myApp = angular.module('MyToDoMvc', []); //注册一个主要的控制器 myApp.controller('MainController', ['$scope', function($scope) { //复杂的递归 保证id不重复 function getId() { var id = Math.random(); for (var i = 0; i < $scope.todos.length; i++) { if ($scope.todos[i].id === id) { id = getId(); break; } } return id; } //文本框模型 $scope.text = ''; //任务列表模型{id 1.text '学习' completed:trur} $scope.todos = [{ id: 1, text: '学习', completed: false, editing: false }, { id: 2, text: '睡觉', completed: false, editing: false }, { id: 3, text: '打豆豆', completed: true, editing: false } ]; //添加元素 $scope.add = function() { $scope.todos.push({ id: $scope.todos.length + 1, text: $scope.text, completed: false }); //清空文本数据 $scope.text = ''; } //处理删除 $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; } /* if (1 === a) { } */ } //$scope.todos } $scope.clear = function() { var result = []; for (var i = 0; i < $scope.todos.length; i++) { if (!$scope.todos[i].completed) { result.push($scope.todos[i]); } /* if (1 === a) { } */ } $scope.todos = result; } //是否已经由完成的 $scope.existCompleted = function() { //该函数一定要有返回值 for (var i = 0; i < $scope.todos.length; i++) { if ($scope.todos[i].completed) { return true; } /* if (1 === a) { } */ } return false; } //当前编辑哪个元素 $scope.currentEditimgId = -1; $scope.editing = function(id) { $scope.currentEditimgId = id; } $scope.save = function(id) { $scope.currentEditimgId = -1; } }]) })(angular);
