<!DOCTYPE html>
<html ng-app>
<head>
<title>todo</title>
<script src="/js/angular.js"></script>
</head>
<script>
var mainCtrl = function($scope){
var menuList = [
{
itemId : 1,
itemName : '목캔디',
itemPrice : 700,
itemCount : 0
},
{
itemId : 2,
itemName : '자갈치',
itemPrice : 2000,
itemCount : 0
},
{
itemId : 3,
itemName : '초코볼',
itemPrice : 1000,
itemCount : 0
}
];
$scope.menuList = menuList;
$scope.totalPrice = 0;
$scope.buy = function(){
$scope.totalPrice = 0;
angular.forEach($scope.menuList, function(menu, idx){
$scope.totalPrice = $scope.totalPrice + (menu.itemPrice * Number(menu.itemCount))
});
};
}
</script>
<body ng-controller="mainCtrl">
<ul class="list-unstyled">
<li ng-repeat="menu in menuList">
{{menu.itemName}}
{{menu.itemPrice}}
<input type="text" ng-model="menu.itemCount">
</li>
</ul>
<button ng-click="buy()">buy</button>
<p>가격 : {{totalPrice}}</p>
</body>
</html>
ng-app : Angular 범위를 제한. 하위 노드들이 Angular기능을 사용할수 있게 된다.
<html ng-app>
ng-controller : 적용된 태그영역을 제어하는 컨트롤러 함수를 입력
<body ng-controller="mainCtrl">
ng-repeat: for/in과 같은 형태로 반복 데이터를 표현
<li ng-repeat="menu in menuList">
ng-model : 자바스크립트 객체와 화면 요소 사으의 양방향 데이터 바인딩을 가능하게 한다.
<input type="text" ng-model="menu.itemCount">
ng-click : 컨트롤러 함수의 $scope에 할당된 함수를 호출한다.
<button ng-click="buy()">buy</button>
'Web > 자잘한거' 카테고리의 다른 글
| [AngularJS] 폼/유효성 검사를 위한 템플릿 (0) | 2018.03.19 |
|---|---|
| [AngularJS] 조건 데이터 표현을 위한 템플릿 (ng-switch, ng-if) (0) | 2018.03.13 |
| Replication (0) | 2018.03.06 |
| GCM (0) | 2018.03.05 |
| RAID - 디스크배열 (0) | 2018.03.05 |
댓글