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);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏软件开发

前端MVC Vue2学习总结(七)——ES6与Module模块化、Vue-cli脚手架搭建、开发、发布项目与综合示例

使用vue-cli可以规范项目,提高开发效率,但是使用vue-cli时需要一些ECMAScript6的知识,特别是ES6中的模块管理内容,本章先介绍ES6中的基...

4467
来自专栏逆向技术

16位汇编语言第二讲系统调用原理,以及各个寄存器详解

   16位汇编语言第二讲系统调用原理,以及各个寄存器详解 昨天已将简单的写了一下汇编代码,并且执行了第一个显示到屏幕的helloworld 问题?   hel...

2230
来自专栏ccylovehs

JavaScript异步编程

平时开发经常会用到js异步编程,由于前端展示页面都是基于网络机顶盒(IPTV的一般性能不太好,OTT较好),目前公司主要采取的异步编程的方式有setTimeou...

1352
来自专栏DOTNET

学会WCF之试错法——客户端调用基础

1当客户端调用未返回结果时,服务不可用(网络连接中断,服务关闭,服务崩溃等) 客户端抛出异常 异常类型:CommunicationException Inne...

2798
来自专栏cnblogs

knockoutjs 上自己实现的flux

在knockoutjs 上实现 Flux 单向数据流 状态机,主要解决多个组件之间对数据的耦合问题。 一、其实简单 flux的设计理念和实现方案,很大程度上人借...

2208
来自专栏Golang语言社区

go语言实现http服务端与客户端

go语言的net/http包的使用非常的简单优雅 (1)服务端 package main import ( "flag" "fm...

36010
来自专栏大内老A

我所理解的Remoting(1):Marshaling & Activation[上篇]

什么是Marshaling &Activation 对任何一项分布式技术(Distributed Technology),比如Remoting,XML Web ...

1898
来自专栏软件开发

前端MVC Vue2学习总结(七)——ES6与Module模块化、Vue-cli脚手架搭建、开发、发布项目与综合示例

使用vue-cli可以规范项目,提高开发效率,但是使用vue-cli时需要一些ECMAScript6的知识,特别是ES6中的模块管理内容,本章先介绍ES6中的基...

1616
来自专栏Java技术栈

Java程序员注意:Tomcat Get请求的巨坑!

2.5K2
来自专栏Golang语言社区

go语言实现http服务端与客户端

go语言的net/http包的使用非常的简单优雅 (1)服务端 package main import ( "flag" "fm...

3586

扫码关注云+社区

领取腾讯云代金券