AngularJS_codeLab 챕터3
1.ngRepeat
- ngRepeat: 배열에 대해 반복문 처럼 사용 가능
//script.js
import angular from 'angular'; //CDN으로 삽입한 angular가 작동 안 해서 삽입
(function(){
var app = angular.module('todo',[]); //todo라는 모듈을 정의
app.controller('TodoCtrl', ['$scope', function($scope){
//todo 객체 배열로 만들기
$scope.todos = [
{
title: '요가수련',
complete: false,
createdAt: Date.now()
},
{
title: '앵귤러 학습',
complete: false,
createdAt: Date.now()
},
{
title: '운동',
complete: true,
createdAt: Date.now()
}
]
}]);
})();
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css" />
<script src="lib/script.js"></script>
<!--angularJS CDN 삽입
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
-->
<!--bootstrap CDN 삽입-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"/>
</head>
<body ng-app="todo" ng-controller="TodoCtrl">
<h1>Todo만들기</h1>
<!--input을 이용한 출력-->
<div ng-repeat="todo in todos">
<input type="text" ng-model="todo.title"/>
<input type="checkbox" ng-model="todo.complete"> <br>
<date>날짜: </date>
</div><br>
<!--list + bootstrap을 이용한 출력-->
<ol class="list-unstyled">
<li ng-repeat="todo in todos">
<date>날짜: </date>
<div class="input-group mb-3">
<div class="input-group-text">
<input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox for following text input" ng-model="todo.complete">
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox" ng-model="todo.title">
</div>
</li>
</ol>
<h3>Todo객체</h3>
</body>
</html>
- 결과 화면
2.ngFilter
- date필터 사용법: https://docs.angularjs.org/api/ng/filter/date
<!--ngFilter를 통한 날짜 포멧 설정-->
<date>날짜: <!----></date>
- 결과 화면
3.ngClick
- 코드 구현
<!--버튼에 ng-click 추가 후 핸들러 등록-->
<!--ng-click="핸들러명(객체명)"-->
<button class="btn btn-danger" type="button" id="button-addon2" ng-click="remove(todo)">삭제</button>
//버튼에 ng-click 추가 후 핸들러 등록
$scope.remove = function(todo){
//todos 객체에서 todo의 index 찾기
var idx = $scope.todos.findIndex(function(item){
return item.id === todo.id;
})
//index찾았으면 해당 index의 todo 제거
if(idx > -1){
$scope.todos.splice(idx, 1);
}
}
- 결과 코드
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css" />
<script src="lib/script.js"></script>
<!--angularJS CDN 삽입
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
-->
<!--bootstrap CDN 삽입-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"/>
</head>
<body ng-app="todo" ng-controller="TodoCtrl">
<h1>Todo만들기</h1>
<ol class="list-unstyled">
<li ng-repeat="todo in todos">
<date>날짜: </date>
<div class="input-group mb-3">
<div class="input-group-text">
<input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox for following text input" ng-model="todo.complete">
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox" ng-model="todo.title">
<!--버튼에 ng-click 추가 후 핸들러 등록-->
<!--ng-click="핸들러명(객체명)"-->
<button class="btn btn-danger" type="button" id="button-addon2" ng-click="remove(todo)">삭제</button>
</div>
</li>
</ol>
<h3>Todo객체</h3>
</body>
</html>
//script.js
import angular from 'angular'; //CDN으로 삽입한 angular가 작동 안 해서 삽입
(function(){
var app = angular.module('todo',[]); //todo라는 모듈을 정의
app.controller('TodoCtrl', ['$scope', function($scope){
//todo 객체 배열로 만들기
$scope.todos = [
{
title: '요가수련',
complete: false,
createdAt: Date.now()
},
{
title: '앵귤러 학습',
complete: false,
createdAt: Date.now()
},
{
title: '운동',
complete: true,
createdAt: Date.now()
}
]
//버튼에 ng-click 추가 후 핸들러 등록
$scope.remove = function(todo){
//todos 객체에서 todo의 index 찾기
var idx = $scope.todos.findIndex(function(item){
return item.id === todo.id;
})
//index찾았으면 해당 index의 todo 제거
if(idx > -1){
$scope.todos.splice(idx, 1);
}
}
}]);
})();
- 결과 화면
3.fliter
- li 태그에 필터 넣기
<!--<li filter:{키:값}"></li>-->
<li ng-repeat="todo in todos | filter:{complete:true}"></li>
- 결과 코드
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css" />
<script src="lib/script.js"></script>
<!--angularJS CDN 삽입
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
-->
<!--bootstrap CDN 삽입-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"/>
</head>
<body ng-app="todo" ng-controller="TodoCtrl">
<div class="container">
<h1>Todo만들기</h1><br>
<ol class="list-unstyled">
<!--li에 필터 구현-->
<li ng-repeat="todo in todos | filter:statusFilter">
<date>날짜: </date>
<div class="input-group mb-3">
<div class="input-group-text">
<input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox for following text input" ng-model="todo.complete">
</div>
<input type="text" class="form-control" aria-label="Text input with checkbox" ng-model="todo.title">
<button class="btn btn-danger" type="button" id="button-addon2" ng-click="remove(todo)">삭제</button>
</div>
</li>
</ol>
<!--button 추가 후 ng-click 구현-->
<button class="btn btn-primary" ng-click="statusFilter={}">전체</button>
<button class="btn btn-primary" ng-click="statusFilter={complete:true}">완료</button>
<button class="btn btn-primary" ng-click="statusFilter={complete:false}">미완료</button>
</div>
</body>
</html>
- 결과 화면
참고
- https://www.youtube.com/watch?v=EklH54kysps&list=PLs_XsVQJKaBk_JN5RctLmmVrGwEzpzqaj