Created
April 25, 2014 23:07
-
-
Save carloscarcamo/11306178 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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