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> </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}> <div class="view"> <input class="toggle" type="checkbox" ng-model="todo.completed"> <label>{{todo.text}}</label> <button class="destroy"></button> </div> <input type="edit" ng-model="todo.text"> </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> </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) { //文本框模型 $scope.text = ''; //任务列表模型{id 1.text '学习' completed:trur} $scope.todos = [{ id: 1, text: '学习', completed: false }, { id: 2, text: '睡觉', completed: false }, { id: 3, text: '打豆豆', completed: true } ]; //添加元素 $scope.add = function() { $scope.todos.push({ id: $scope.todos.length + 1, text: $scope.text, completed: false }); //清空文本数据 $scope.text = ''; } }]) })(angular);
