728x90
반응형
체크박스 추가
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>TO DO LIST</title>
<link href="./angular-1.3.7/bootstrap-5.1.3-dist/css/bootstrap.css" rel="stylesheet" />
<link href="./angular-1.3.7/bootstrap-5.1.3-dist/css/bootstrap-theme.css" rel="stylesheet" />
<!-- angular 사용하기 위해서 추가. -->
<script src="./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', ['$scope', function ($scope) {
$scope.todo = model;
$scope.name = 'scope를 빼도 되는지 테스트:';
}]);
</script>
</head>
<body ng-controller="ToDoCtrl">
<div class="page-header">
<h1>
{{name}} {{todo.user}} 의 할일 목록 <span class="label">{{todo.items.length}}</span>
</h1>
</div>
<div class="panel">
<div class=""input-group">
<input class="form-control" />
<span class=""input-group-btn">
<button class="btn btn-dark">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>
<td>{{item.done}}</td>
</tr>
</tbody>
</table>
</div>
</body>
728x90
반응형
'IT > JavaScript와 Framework' 카테고리의 다른 글
| AngularJS ver.1.3.7 - 02-08 (0) | 2022.02.23 |
|---|---|
| AngularJS ver.1.3.7 - 02-07 (0) | 2022.02.23 |
| AngularJS ver.1.3.7 - 02-05 (0) | 2022.02.23 |
| AngularJS ver.1.3.7 - 02-04 (0) | 2022.02.21 |
| AngularJS ver.1.3.7 - 02-03 (0) | 2022.02.21 |
댓글