1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
|
<!doctype html>
<!-- ng-app 지시어를 지정하면, 이요소부터 angularjs가 관리한다.-->
<html ng-app>
<head>
<title>Cart</title>
</head>
<!-- 컨트롤러로 페이지 영역을 관리한다. 이렇게 하면 body를 모두 관리한다.-->
<body ng-controller="CartController">
<h1>Cart</h1>
<!-- ng-repeat는 div 아래 항목들을 items 만큼 반복한다 -->
<div ng-repeat="item in items">
<!-- {{}} 는 "값을 여기다 삽입하라" 라는 단방향을 말한다 -->
<!-- {{}} 를 사용하여 데이터를 바인딩하면, 값을 삽입하고 동기화를 유지할 수 있다 -->
<span>{{item.title}}</span>
<!-- ng-model을 사용하면 input field와 imte.quantity의 값이 바인딩 된다 -->
<input ng-model="item.quantity">
<!-- 필터 기능 : currency 필터를 이용하면 값을 달러 단위로 바꿀 수 있다 -->
<span>{{item.price | currency}}</span>
<span>{{item.price * item.quantity | currency}}</span>
<!-- 버튼을 클릭하면 remove 함수가 호출된다. $index는 ng-repqet의 반복 횟수다-->
<button ng-click="remove($index)">remove</button>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script>
// $scope를 통햇 ui 바인딩이 이뤄진다
function CartController($scope) {
//items data에 배열로 값을 binding 하낟.
$scope.items = [ {
title : 'A Model',
quantity : 8,
price : 3.95
}, {
title : 'B Model',
quantity : 17,
price : 12.95
}, {
title : 'C Model',
quantity : 5,
price : 6.95
} ];
// items 항목에서 해당 인덱스를 제거한다.
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}
</script>
</body>
</html>
| cs |
Cart
{{item.title}}
{{item.price | currency}}
{{item.price * item.quantity | currency}}
댓글 없음:
댓글 쓰기