todomvc-app
1、HTML
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title>Template • TodoMVC</title>
7 <link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
8 <!-- CSS overrides - remove if you don't need it -->
9 <link rel="stylesheet" href="css/app.css">
10 </head>
11 <body ng-app="MyTodoMvc">
12 <section class="todoapp" ng-controller="MainController">
13 <header class="header">
14 <h1>todos</h1>
15 <form ng-submit="add()">
16 <input class="new-todo" placeholder="What needs to be done?" ng-model="text" autofocus>
17 </form>
18 </header>
19 <section class="main">
20 <input class="toggle-all" type="checkbox" ng-click="toggleAll()">
21 <label for="toggle-all">Mark all as complete</label>
22 <ul class="todo-list">
23 <li ng-repeat="todo in todos | filter: selector : equalCompare" ng-class="{completed:todo.completed,editing:todo.id===currentEditingId}" data-id="{{todo.id}}">
24 <div class="view">
25 <input class="toggle" type="checkbox" ng-model="todo.completed">
26 <label ng-dblclick="editing(todo.id)">{{todo.text}}</label>
27 <button class="destroy" ng-click="remove(todo.id)"></button>
28 </div>
29 <form ng-submit="save()">
30 <input class="edit" ng-model="todo.text" ng-blur="save()">
31 </form>
32 </li>
33 </ul>
34 </section>
35 <!-- This footer should hidden by default and shown when there are todos -->
36 <footer class="footer">
37 <!-- This should be `0 items left` by default -->
38 <span class="todo-count"><strong>{{todos.length}}</strong> item left</span>
39 <!-- Remove this if you don't implement routing -->
40 <ul class="filters">
41 <li>
42 <a ng-class="{selected:$location.path() == '/'}" href="#/">All</a>
43 </li>
44 <li>
45 <a ng-class="{selected:$location.path() == '/active'}" href="#/active">Active</a>
46 </li>
47 <li>
48 <a ng-class="{selected:$location.path() == '/completed'}" href="#/completed">Completed</a>
49 </li>
50 </ul>
51 <!-- Hidden if no completed items are left ↓ -->
52 <button class="clear-completed" ng-click="clear()" ng-show="existCompleted()">Clear completed</button>
53 </footer>
54 </section>
55 <footer class="info">
56 <p>Double-click to edit a todo</p>
57 <!-- Remove the below line ↓ -->
58 <p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
59 <!-- Change this out with your name and url ↓ -->
60 <p>Created by <a href="http://todomvc.com">you</a></p>
61 <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
62 </footer>
63 <!-- Scripts here. Don't remove ↓ -->
64 <script src="node_modules/angular/angular.js"></script>
65 <script src="js/app.js"></script>
66 </body>
67 </html>2、app.js
1 (function(angular) {
2 'use strict';
3
4
5 // 1. 为应用程序创建一个模块，用来管理界面的结构
6 var myApp = angular.module('MyTodoMvc', []);
7
8 // 2. 注册一个主要的控制器（属于某个模块），用于往视图（view）中暴露数据
9 myApp.controller('MainController', ['$scope', '$location', function($scope, $location) {
10 // [1,2,3,4,5]
11 // 获取唯一ID
12 function getId() {
13 var id = Math.random(); // 1 2
14 for (var i = 0; i < $scope.todos.length; i++) {
15 if ($scope.todos[i].id === id) {
16 id = getId();
17 break;
18 }
19 }
20 return id;
21 }
22
23 // 文本框需要一个模型，为了拿到文本输入的值
24 $scope.text = '';
25
26 // 任务列表也需要一个
27 // 每一个任务的结构 { id: 1, text: '学习', completed: true }
28 $scope.todos = [{
29 id: 0.123,
30 text: '学习',
31 completed: false
32 }, {
33 id: 0.22,
34 text: '睡觉',
35 completed: false
36 }, {
37 id: 0.232,
38 text: '打豆豆',
39 completed: true
40 }];
41
42 // 添加todo
43 $scope.add = function() {
44 if (!$scope.text) {
45 return;
46 }
47 $scope.todos.push({
48 // 自动增长？
49 id: getId(),
50 // 由于$scope.text是双向绑定的，add同时肯定可以同他拿到界面上的输入
51 text: $scope.text,
52 completed: false
53 });
54 // 清空文本框
55 $scope.text = '';
56 };
57
58
59 // 处理删除
60 $scope.remove = function(id) {
61 // 删除谁
62 for (var i = 0; i < $scope.todos.length; i++) {
63 if ($scope.todos[i].id === id) {
64 $scope.todos.splice(i, 1);
65 break;
66 }
67 }
68 // $scope.todos
69 };
70
71 // 清空已完成
72 $scope.clear = function() {
73 var result = [];
74 for (var i = 0; i < $scope.todos.length; i++) {
75 if (!$scope.todos[i].completed) {
76 result.push($scope.todos[i]);
77 }
78 }
79 $scope.todos = result;
80 };
81
82 // 是否有已经完成的
83 $scope.existCompleted = function() {
84 // 该函数一定要有返回值
85 for (var i = 0; i < $scope.todos.length; i++) {
86 if ($scope.todos[i].completed) {
87 return true;
88 }
89 }
90 return false;
91 };
92
93 // 当前编辑哪个元素
94 $scope.currentEditingId = -1;
95 // -1代表一个肯定不存在的元素，默认没有任何被编辑
96 $scope.editing = function(id) {
97 $scope.currentEditingId = id;
98 };
99 $scope.save = function() {
100 $scope.currentEditingId = -1;
101 };
102
103 // $scope.checkall = false;
104 // $scope.$watch('checkall', function(now, old) {
105 // for (var i = 0; i < $scope.todos.length; i++) {
106 // $scope.todos[i].completed = now;
107 // }
108 // });
109
110 var now = true;
111 $scope.toggleAll = function() {
112 for (var i = 0; i < $scope.todos.length; i++) {
113 $scope.todos[i].completed = now;
114 }
115 now = !now;
116 }
117
118 // 状态筛选
119 $scope.selector = {}; // {} {completed:true} {completed:false}
120 // 点击事件的方式不合适，有DOM操作
121 // 让$scope也有一个指向$location的数据成员
122 $scope.$location = $location;
123 // watch只能监视属于$scope的成员
124 $scope.$watch('$location.path()', function(now, old) {
125 // 1. 拿到锚点值
126 // 这样写就要求执行环境必须要有window对象
127 // var hash = window.location.hash;
128 // console.log($location);
129 // console.log(now);
130 // 2. 根据锚地值对selector做变换
131 switch (now) {
132 case '/active':
133 $scope.selector = { completed: false };
134 break;
135 case '/completed':
136 $scope.selector = { completed: true };
137 break;
138 default:
139 $scope.selector = {};
140 break;
141 }
142 });
143
144 // 自定义比较函数, 默认filter过滤器使用的是模糊匹配
145 $scope.equalCompare = function(source, target) {
146 // console.log(source);
147 // console.log(target);
148 // return false;
149 return source === target;
150 };
151
152
153 }]);
154
155 })(angular);本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-04-15 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读