AngularJS로 장바구니(ShoppingList)에 상품을 등록하고 삭제하는 예제다. 화면이 깔끔하게 표시되도록 Bootstrap을 사용하였다. 아래의 URL의 우측에 표시된 장바구니 화면을 참고하여 코드에 적용하였다.
먼저 Bootstrap을 적용하기 위해 <head> 태그에 아래의 코드를 추가한다.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
items에 초기에 표시되는 상품을 선언한다.
$scope.items = [ "감자", "우유", "라면", "사과" ];
상품을 추가할 때 목록에 없는 상품이면 등록하고 목록에 있는 상품이면 에러메시지를 표시하는 함수이다.
$scope.addItem = function() {
$scope.errorMsg = "";
if (!$scope.addMe) {
return;
}
if ($scope.items.indexOf($scope.addMe) == -1) {
$scope.items.push($scope.addMe);
$scope.addMe = "";
} else {
$scope.errorMsg = "이미 등록된 상품입니다.";
}
}
상품을 삭제하는 함수이다.
$scope.removeItem = function(x) {
$scope.errorMsg = "";
$scope.items.splice(x, 1);
}
예제의 전체코드이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AngularJS</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" type="text/javascript"></script>
<script>
var app = angular.module("myShoppingList", []);
app.controller("myCtrl", function($scope) {
$scope.items = [ "감자", "우유", "라면", "사과" ];
$scope.addItem = function() {
$scope.errorMsg = "";
if (!$scope.addMe) {
return;
}
if ($scope.items.indexOf($scope.addMe) == -1) {
$scope.items.push($scope.addMe);
$scope.addMe = "";
} else {
$scope.errorMsg = "이미 등록된 상품입니다.";
}
}
$scope.removeItem = function(x) {
$scope.errorMsg = "";
$scope.items.splice(x, 1);
}
});
</script>
</head>
<body>
<div ng-app="myShoppingList" ng-cloak ng-controller="myCtrl" class="col-md-4 order-md-2 mb-4">
<br>
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">장바구니</span> <span class="badge badge-secondary badge-pill">{{items.length}}</span>
</h4>
<ul class="list-group mb-3">
<li ng-repeat="item in items" class="list-group-item d-flex justify-content-between lh-condensed">{{item}} <span ng-click="removeItem($index)"
style="cursor: pointer;" class="w3-right w3-margin-right">삭제</span>
</li>
</ul>
<form class="card p-2">
<div class="input-group">
<input type="text" class="form-control" placeholder="상품을 입력하세요." ng-model="addMe">
<div class="input-group-append">
<button ng-click="addItem()" class="btn btn-secondary">추가</button>
</div>
</div>
<p style="color: red">{{errorMsg}}</p>
</form>
<hr>
</div>
</body>
</html>
화면을 열면 처음에는 아래와 같이 표시된다.
장바구니에서 라면을 삭제한다.
우측상단에 바인딩된 {{items.length}}에 상품의 개수가 자동으로 표시된다.
장바구니에 사과가 있는데 다시 사과를 추가하려고 하면 아래와 같이 에러메시지가 표시되고 추가되지 않는다.
728x90
'■ Front-End ■ > AngularJs' 카테고리의 다른 글
| [AngularJS] 데이터를 SelectBox에 표시한 뒤 선택한 항목을 표시 (0) | 2023.02.22 |
|---|---|
| [AngularJS] 헤더를 클릭하여 테이블에 출력한 데이터를 정렬 (0) | 2023.02.22 |
| [AngularJS] 폼 입력항목 AngularJS의 유효성검사 (0) | 2023.02.22 |
| [AngularJS] 폼에서 angular.copy() 함수를 사용하여 reset 기능구현 (0) | 2023.02.22 |
| [AngularJS] ng-show, ng-hide 속성으로 화면요소를 보이기/감추기 (0) | 2023.02.22 |
댓글