"AngularJS 튜토리얼 - 할일목록 예제"의 두 판 사이의 차이

2015년 6월 16일 (화) 20:57 판

AngularJS 시작하기
AngularJS 튜토리얼

1 index.html

index.html 만들기

<!doctype html>
<html ng-app="todoApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script>
<script src="js/todo.js"></script>
</head>
<body>

<h2>할일</h2>
<div ng-controller="TodoListController as todoList">
  <span>전체 {{todoList.todos.length}}개 중 {{todoList.remaining()}}개 남음</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="여기에 새 할일 추가하세요">
	<input class="btn-primary" type="submit" value="추가">
  </form>
</div>

</body>
</html>

2 todo.js

js 폴더를 만들고 거기에 todo.js 파일을 만든다.

angular.module('todoApp', [])
  .controller('TodoListController', function() {
    var todoList = this;
    todoList.todos = [
      {text:'공부하기', done:true},
      {text:'앱 만들기', done:false}];
 
    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);
      });
    };
  });

3 테스트

예제: http://zetawiki.com/angular/todo-app/

4 같이 보기

5 참고 자료

https://angularjs.org/

@@ 71번째 줄: / 71번째 줄: @@
 ==같이 보기==
+*[[AngularJS 튜토리얼 2]]
 *[[AngularJS]]