Skip to content

Instantly share code, notes, and snippets.

@carloscarcamo
Created April 25, 2014 23:07
Show Gist options
  • Save carloscarcamo/11306178 to your computer and use it in GitHub Desktop.
Save carloscarcamo/11306178 to your computer and use it in GitHub Desktop.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<meta charset="utf-8">
<title>Shopping Cart</title>
</head>
<body ng-app='shoppingCart'>
<div ng-controller="CartController">
<div ng-repeat="item in items">
<span>{{item.title}}</span>
<input ng-model="item.quantity">
<span>Price: {{item.price | currency}}</span>
<span>Total price: {{item.price * item.quantity | currency}}</span>
</div><br>
<div>Total: {{bill.totalCart | currency}}</div>
<div>Discount: {{bill.discount | currency}}</div>
<div>Subtotal: {{bill.subtotal | currency}}</div>
</div>
</body>
</html>
var shoppingCart = angular.module('shoppingCart', []);
shoppingCart.controller('CartController',
['$scope', function($scope){
$scope.bill = {};
$scope.items = [
{title: 'Paint pots', quantity: 8, price: 3.95},
{title: 'Polka dots', quantity: 17, price: 12.95},
{title: 'Pebbles', quantity: 5, price: 6.95}
];
//better solution
$scope.$watch(function(){
var total = 0;
for(var i=0, len=$scope.items.length; i<len; i++){
total = total + $scope.items[i].price * $scope.items[i].quantity;
}
$scope.bill.totalCart = total;
$scope.bill.discount = total > 100 ? 10 : 0;
$scope.bill.subtotal = total - $scope.bill.discount;
});
/*var calculateTotals = function(){
var total = 0;
for(var i=0, len=$scope.items.length; i<len; i++){
total = total + $scope.items[i].price * $scope.items[i].quantity;
}
$scope.bill.totalCart = total;
$scope.bill.discount = total > 100 ? 10 : 0;
$scope.bill.subtotal = total - $scope.bill.discount;
};*/
/*since we’re watching the items array, Angular will
* have to make a copy of it to compare it for us
*/
//$scope.$watch('items', calculateTotals, true);
/*
* One big problem here was that the totalCart function was called 6
* times:
* - The tamplate {{totalCart() | currency}}
* - The subtotal() function
* - The $watch() function
* Then Angular runs all of these again
*/
/*$scope.totalCart = function(){
var total = 0;
for(var i=0, len=$scope.items.length; i<len; i++){
total = total + $scope.items[i].price * $scope.items[i].quantity;
}
return total;
};
$scope.subtotal = function(){
return $scope.totalCart() - $scope.bill.discount;
};
function calculateDiscount(newValue, odlValue, scope){
$scope.bill.discount = newValue > 100 ? 10:0;
}
$scope.$watch($scope.totalCart, calculateDiscount);*/
}]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment