carloscarcamo/jsbin.wevis.html

## jsbin.wevis.html
<!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>

## jsbin.wevis.js
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);*/
  }]);
	<!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);*/
	}]);