-
Notifications
You must be signed in to change notification settings - Fork 55
/
01-1-shopping.html
86 lines (71 loc) · 2.52 KB
/
01-1-shopping.html
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html>
<!--This app is a modified version of the app presented in the AngularJS book demonstrating some of the useful features of AngularJS
AngularJS by Brad Green and Shyam Seshadri (O’Reilly). Copyright 2013 Brad Green and Shyam Seshadri, 978-1-449-34485-6.-->
<head>
<title>Shopping Cart</title>
<style>*{font-family: Tahoma; font-size: 1em;}#wrapper{width:100%;}
#suggested,#current{width:50%; margin:0 auto; border:solid black 1px;}; h3{font-size:1.5em}</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script>
//here we create an app called 'shop'
var app = angular.module('shop', []);
//injecting the $scope into the Shop controller
app.controller('Cart', function($scope){
//this array holds the available items
$scope.available = [
{title:'Pencils', price:10},
{title:'Pens', price:11},
{title: 'Eraser', price:1},
{title: 'Notebook', price:15}
];
//this array holds the shopping cart
$scope.cart = [];
//this function adds an item to the cart
$scope.add = function(index){
var qty = parseInt(prompt("How many?"));
item = $scope.available[index];
$scope.cart.push({title:item.title, qty:qty, price:item.price});
alert("Added "+qty+" of "+item.title);
}
//this function removes an item from the cart
$scope.remove = function(index){
$scope.cart.splice(index,1);
}
//this function calculates the total cost of the cart
$scope.total = function(cart){
var sum = 0;
for(var i = 0,l = cart.length; i <l; i++){
sum = sum + (cart[i].qty * cart[i].price);
}
return sum;
}
});
</script>
</head>
<body ng-app="shop">
<div id="wrapper" ng-controller="Cart">
<div id="suggested">
<div ng-repeat="item in available">
<!--ng-repeat iterates over the whole $scope.available array-->
<span>{{item.title}}</span>
<span><b>Price: {{item.price | currency}}</b></span>
<button ng-click="add($index)">Add</button>
<!--Here we pass the $index which holds the iteration number-->
</div>
</div>
<div id="current">
<div ng-repeat="item in cart">
<span>{{item.title}}</span>
<span>Price: {{item.price | currency}}, Qty: {{item.qty}}<br />
<!--Here we do a quick expression evaluation-->
<b>Total: {{item.price * item.qty | currency }}</b></span>
<button ng-click="remove($index)">Remove</button>
<br />
</div>
<h3> Grand Total {{ total(cart) | currency }}</h3>
<!--Here we execute a fucntion total() that takes in the shopping cart as an argument-->
</div>
</div>
</body>
</html>