반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 합쳐지고 최소화된 최신 CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"
/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-app="todo" ng-controller="TodoCtrl">
<h1>Todo List</h1>
<div class="container">
<form name="todoForm" ng-submit="add(newTodoTitle)">
<div class="input-group">
<input
type="text"
class="form-control"
ng-model="newTodoTitle"
placeholder="새로운 todo를 입력하세요"
/>
<span class="input-group-btn">
<button class="btn btn-success" type="submit">추가</button>
</span>
</div>
</form>
{{todoForm}}
<ul class="list-unstyled">
<!-- ng-repeat=(변수, 인덱스) in $scope의 데이터 -->
<li ng-repeat="todo in todos | filter:statusFilter">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" ng-model="todo.completed" />
</span>
<input type="text" class="form-control" ng-model="todo.title" />
<span class="input-group-btn">
<button
ng-click="deleteClick(todo)"
class="btn btn-danger"
type="button"
>
삭제
</button>
</span>
</div>
<div>
<date>{{todo.createdAt | date}}</date>
</div>
<date>{{todo.createdAt | date:'yyyy-MM-dd HH:mm:ss'}}</date>
</li>
</ul>
<button class="btn btn-primary" ng-click="statusFilter={completed:true}">
Completed
</button>
<button class="btn btn-primary" ng-click="statusFilter={completed:false}">
Active
</button>
<button class="btn btn-primary" ng-click="statusFilter={}">All</button>
</div>
<script src="./script.js"></script>
</body>
</html>
form에서 name으로 지칭한 todoForm을
{{todoForm}}을 통해 나타내게 되면
해당 과같은 정보들이 출력이된다.
$name form에 등록한 이름
$dirty 필드를 수정했을때 true로 변한다
$prinsitne 사용자와 필드가 상호작용을 했는지
$valid 필드안의 내용들이 유효한지
$invalid 필드안에 내용들이 유효하지않은지
$submitted 필드내용을 submit했는지
//모듈: 컨테이너
//모듈안에: 컨트롤러, 디렉티브, 서비스가 담겨있다
(function () {
// app이라는 변수에 todo라는 모듈이 담긴다
var app = angular.module("todo", []);
//두번째 파라미터는 배열로준다
app.controller("TodoCtrl", [
"$scope",
function ($scope) {
// $scope.name = "Chris";
// $scope.data = "aa";
$scope.todos = [
{
title: "요가 수행",
completed: false,
createdAt: Date.now(),
},
{
title: "앵귤러 학습",
completed: true,
createdAt: Date.now(),
},
{
title: "운동하기",
completed: false,
createdAt: Date.now(),
},
];
$scope.deleteClick = function (todo) {
console.log(todo);
//find todo index in todos
// $scope.todos = $scope.todos.filter((li) => li !== todo);
var idx = $scope.todos.findIndex(function (item) {
return item.id === todo.id;
});
//remove from todos
if (idx > -1) {
$scope.todos.splice(idx, 1);
}
};
$scope.add = function (newTodoTitle) {
console.log(newTodoTitle);
var newTodo = {
title: newTodoTitle,
completed: false,
createdAt: Date.now(),
};
$scope.todos.push(newTodo);
console.log($scope.todos);
//empty form
$scope.newTodoTitle = "";
};
},
]);
})();
해당 form 데이터들과 ng-show를 이용하면 invalid인 경우에만 경고메세지를 바인딩해서 보여줄수 있다.
<div ng-show="todoForm.$dirty && todoForm.$invalid">
<div class="alert alert-warning" role="alert">
3글자 이상 입력하세요.
</div>
</div>
해당 상황을 활용해서
css를 나타낼수도있다.
/* 입력한 값이 valid일때 */
.input-group .ng-valid.ng-dirty {
border: 1px solid green;
}
/* 입력한 값이 invalid한 값일떄 */
.input-group .ng-invalid.ng-dirty {
border: 1px solid red;
}
반응형
'Angular > angularjs' 카테고리의 다른 글
| angular service(factory) (0) | 2020.05.22 |
|---|---|
| angular directive (모듈화) (0) | 2020.05.20 |
| ng-repeat, ng-filter, ng-click (0) | 2020.05.20 |
| ng-app, controller (0) | 2020.05.20 |
