TODO Application Challenge

You are viewing an old version of this snippet. View the current version.

Revised by Toshiyuki Tanaka 2015-07-20 3f284a4

index.html

      <!doctype html>
<html ng-app="todoApp">
	<head>
		<meta charset="utf-8">
		<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
		<script>
			angular.module('todoApp', [])
				.controller('TodoListController', function() {
					var todoList = this;
					todoList.todos = [];
			 
					todoList.addTodo = function() {
						todoList.todos.push({text:todoList.todoText, done:false});
						todoList.todoText = '';
					};
			 
					todoList.remaining = function() {
						var count = 0;
						angular.forEach(todoList.todos, function(todo) {
							count += todo.done ? 0 : 1;
						});
						return count;
					};
			 
					todoList.archive = function() {
						var oldTodos = todoList.todos;
						todoList.todos = [];
						angular.forEach(oldTodos, function(todo) {
							if (!todo.done) todoList.todos.push(todo);
						});
					};
				});
		</script>
	</head>
	<body>
		<h2>Todo</h2>
		<div ng-controller="TodoListController as todoList">
			<span>{{todoList.todos.length}}個中、{{todoList.remaining()}}個のTODOが残っています。</span>
			[ <a href="" ng-click="todoList.archive()">アーカイブ</a> ]
			<ul class="unstyled">
				<li ng-repeat="todo in todoList.todos">
					<input type="checkbox" ng-model="todo.done">
					<span class="done-{{todo.done}}">{{todo.text}}</span>
				</li>
			</ul>
			<form ng-submit="todoList.addTodo()">
				<input type="text" ng-model="todoList.todoText" size="30" placeholder="新しいTODO">
				<input class="btn-primary" type="submit" value="追加">
			</form>
		</div>
	</body>
</html>

    

HTTPS

SSH

You can clone a snippet to your computer for local editing. Learn more.

Snippets

Tapit Inc. TODO Application Challenge