<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>TO DO LIST</title>
<link href="./js/bootstrap-5.1.3-dist/css/bootstrap.css" rel="stylesheet" />
<link href="./js/bootstrap-5.1.3-dist/css/bootstrap-theme.css" rel="stylesheet" />
<!-- angular 사용하기 위해서 추가. -->
<script src="./js/angular-1.3.7/angular.js"></script>
<script>
var model = {
user : "골든크랩",
items: [{ action : "강의자료를 만든다.", done: false},
{ action : "해외주식을 산다.", done: false},
{ action : "친구에게 술을 산다.", done: false},
{ action : "여행준비를 한다.", done: false}]
};
var todoApp = angular.module('todoApp', []);
todoApp.controller('ToDoCtrl', function ($scope) {
$scope.todo = model;
$scope.name = 'scope를 빼도 되는지 테스트:';
$scope.incomplteCount = function () {
var count = 0;
angular.forEach($scope.todo.items, function(item) {
if (!item.done) { count++ }
});
return count;
}
$scope.warningLevel = function () {
return $scope.incomplteCount() < 3 ? "label-success" : "label-warning";
}
$scope.addNewItem = function (actionText) {
$scope.todo.items.push({action: actionText, done:false});
}
});
</script>
</head>
<body ng-controller="ToDoCtrl">
<div class="page-header">
<h1>
{{name}} {{todo.user}} 의 할일 목록
<span class="label label-default" ng-class="warningLevel()" ng-hide="incomplteCount() == 0">
{{incomplteCount()}}
</span>
</h1>
</div>
<div class="panel">
<div class=""input-group">
<input class="form-control" ng-model="actionText" />
<span class=""input-group-btn">
<button class="btn btn-dark" ng-click="addNewItem(actionText)">Add</button>
</span>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>할 일 목록</th>
<th>완료 여부</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in todo.items">
<td>{{item.action}}</td>
<td><input type="checkbox" ng-model="item.done"/></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
'IT > JavaScript와 Framework' 카테고리의 다른 글
| AngularJS - routeProvider와 urlRouterProvider 차이 $rootScope.on 에 대한 써머리들 (0) | 2022.04.29 |
|---|---|
| AngualJS 라우팅과 localStorage 등등 잡탕 (0) | 2022.04.27 |
| AngularJS 서비스 생성 API provider, factory, service (0) | 2022.04.18 |
| JWT ( JSON WEB TOKEN ) 이란? (0) | 2022.04.14 |
| eclipse로 JSP 테스트시 URL 경로와 Tomcat 설정 (0) | 2022.04.13 |
댓글