AngularJS开发记事本小程序

OGeek|极客世界-中国程序员成长平台 › 门户 › 编程› 移动开发›小程序云开发高级教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

这是源代码（github）：[email protected]:Hughendman/notebook.git

这是HTML代码：

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>NoteBook</title>
		<link rel="stylesheet" href="css/base.css">
		<link rel="stylesheet" href="css/index.css">
		<script src="js/angular.min.js"></script>
	</head>
	<body ng-app="Todos">
		<section class="todoapp" ng-controller="TodosCtrl">
			<header class="header">
				<h1>NOTE</h1>
				<form ng-submit="add()">
					<input class="new-todo" ng-model="todo" placeholdder="You need to do something!!" autofocus>
				</form>
			</header>
			<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.flag}">
						<div class="view">
							<input class="toggle" ng-click="toggle($index)" type="checkbox" ng-checked="todo.flag">
							<label>{{todo.text}}</label>
							<button class="destroy" ng-click="delete($index)"></button>
						</div>
						<input class="edit" value="Create a TodoMVC template">
					</li>
				</ul>
			</section>
			<footer class="footer">
				<span class="todo-count"><strong>{{length}}</strong> item left</span>
				<button class="clear-completed" ng-click="clear()">Clear completed</button>
			</footer>
		</section>
		<script>
			var Todos = angular.module('Todos', []);

			Todos.controller('TodosCtrl', ['$scope', function ($scope) {
				// 声明一个数组，用来存储待办事项
				$scope.todos = [
					{text: '写日记', flag: true},
					{text: '做饭', flag: false},
					{text: '洗脸', flag: true},
					{text: '刷牙', flag: true},
				];
				$scope.add = function () {
					// 向数组中添加数据
					$scope.todos.push({text: $scope.todo, flag: false});
					// 清空表单
					$scope.todo = '';
					$scope.length=$scope.count();
					
				};

				// 切换事项状态（完成/未完成）
				$scope.toggle = function (index) {
					// 改变数组中某单元的flag属性
					$scope.todos[index].flag = !$scope.todos[index].flag;
					$scope.length=$scope.count();
				};

				// 删除事项
				$scope.delete = function(index) {
					// 将数组中某单元删除
					$scope.todos.splice(index, 1);
					$scope.length=$scope.count();
					
				};
				$scope.clear = function (){
					for (var i=0 ;i< $scope.todos.length ; i++){
						if($scope.todos[i].flag==true){
							$scope.delete(i);
							$scope.clear();
						}

					}
				};
				$scope.count=function(){
					var count=0;
					for(var i=0;i<$scope.todos.length;i++){
						if($scope.todos[i].flag==false){
							count++;
						}
					}
					return count;
				}
				$scope.length=$scope.count();
			}]);

		</script>
	</body>
</html>

　　这是base.css文件（注意，请用less）

hr {
	margin: 20px 0;
	border: 0;
	border-top: 1px dashed #c5c5c5;
	border-bottom: 1px dashed #f7f7f7;
}

.learn a {
	font-weight: normal;
	text-decoration: none;
	color: #b83f45;
}

.learn a:hover {
	text-decoration: underline;
	color: #787e7e;
}

.learn h3,
.learn h4,
.learn h5 {
	margin: 10px 0;
	font-weight: 500;
	line-height: 1.2;
	color: #000;
}

.learn h3 {
	font-size: 24px;
}

.learn h4 {
	font-size: 18px;
}

.learn h5 {
	margin-bottom: 0;
	font-size: 14px;
}

.learn ul {
	padding: 0;
	margin: 0 0 30px 25px;
}

.learn li {
	line-height: 20px;
}

.learn p {
	font-size: 15px;
	font-weight: 300;
	line-height: 1.3;
	margin-top: 0;
	margin-bottom: 0;
}

#issue-count {
	display: none;
}

.quote {
	border: none;
	margin: 20px 0 60px 0;
}

.quote p {
	font-style: italic;
}

.quote p:before {
	content: '“';
	font-size: 50px;
	opacity: .15;
	position: absolute;
	top: -20px;
	left: 3px;
}

.quote p:after {
	content: '”';
	font-size: 50px;
	opacity: .15;
	position: absolute;
	bottom: -42px;
	right: 3px;
}

.quote footer {
	position: absolute;
	bottom: -40px;
	right: 0;
}

.quote footer img {
	border-radius: 3px;
}

.quote footer a {
	margin-left: 5px;
	vertical-align: middle;
}

.speech-bubble {
	position: relative;
	padding: 10px;
	background: rgba(0, 0, 0, .04);
	border-radius: 5px;
}

.speech-bubble:after {
	content: '';
	position: absolute;
	top: 100%;
	right: 30px;
	border: 13px solid transparent;
	border-top-color: rgba(0, 0, 0, .04);
}

.learn-bar > .learn {
	position: absolute;
	width: 272px;
	top: 8px;
	left: -300px;
	padding: 10px;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, .6);
	transition-property: left;
	transition-duration: 500ms;
}

@media (min-width: 899px) {
	.learn-bar {
		width: auto;
		padding-left: 300px;
	}

	.learn-bar > .learn {
		left: 8px;
	}
}

　　最后别忘记引入angular.min.js文件，以及初始化样式的index.css文件（网上有很多）。