<div ng-controller="todoCtrl"> <h1>{{appName}}</h1> <p>전체 할 일 <strong>{{todoList.length}}</strong>개 / 남은 할일은 <strong>{{remain()}}</strong>개 [ <a href="#archive" ng-click="archive()">보관하기</a> ]</p> <ul class="list-unstyled"> <li ng-repeat="todo in todoList"> <input type="checkbox" ng-model="todo.done" />{{todo.title}}</li> </ul> <form name="newItemForm" class="form-inline" action=""> <div class="form-group"> <label class="sr-only" for="newItemText">새로운 할 일</label> <input type="text" class="form-control" name="newItemText" placeholder="새로운 할 일" ng-model="newTitle" /> </div> <button type="button" class="btn btn-default" ng-click="addNewTodo(newTitle)">추가</button> </form> </div>
var todoList = [{ done: true, title: "AngularJS 독서" }, { done: false, title: "AngularJS 공부하기" }, { done: false, title: "개인 프로젝트 구성" }]; var todoCtrl = function($scope) { $scope.appName = "AngularJS TODO Application"; // 초기 할일 목록 설정 $scope.todoList = todoList; // 새로운 할일 추가 $scope.addNewTodo = function (newTitle) { todoList.push({ done: false, title: newTitle }); $scope.newTitle = ''; }; // 완료 할 일 삭제 $scope.archive = function() { for (var i = $scope.todoList.length - 1; i >= 0; i--) { if ($scope.todoList[i].done) { $scope.todoList.splice(i, 1); } } }; // 남은 할 일 수 계산 $scope.remain = function() { var remainCount = 0; angular.forEach($scope.todoList, function(value, key) { if (value.done === false) { remainCount++; } }); return remainCount; }; };