Welcome to JS Bin
Load cached copy from
 
<!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>JS Bin</title>
</head>
<body ng-app="Store">
  <nav>
    <div ng-controller="CartCtrl">
      Total Price: {{totalPrice}}
    </div>
  </nav>
  <div ng-controller="OrderCtrl as order">
    <ul>
      <li ng-repeat="product in order.products">
        <h3>{{product.name}} - {{product.price}}</h3>
        <button ng-click="order.addToOrder(product)">
          Add
        </button>
        <button ng-click="order.removeFromOrder(product)">
          Remove
        </button>
      </li>
    </ul>
  </div>
</body>
</html>
 
angular.module('Store', [])
.factory('Products', function() {
    return {
        query: function() {
            return [{ name: 'Lightsaber', price: 1299.99}, { name: 'Jet Pack', price: 9999.99}, { name: 'Speeder', price: 24999.99}];
        }
    };
})
.factory('Order', function() {    
    var add = function(item, qty) {
        item.qty = qty;
        this.items.push(item);
    };
    
    var remove = function(item) {
        if (this.items.indexOf(item) > -1) {
          this.items.splice(this.items.indexOf(item), 1);  
        }
    };
    
    var total = function() {
        return this.items.reduce(function(memo, item) {
            return memo + (item.qty * item.price);
        }, 0);
    };
    return {
        items: [],
        addToOrder: add,
        removeFromOrder: remove,
        totalPrice: total
    };
}).controller('OrderCtrl', function(Products, Order) {
    this.products = Products.query();
    this.items = Order.items;
    
    this.addToOrder = function(item) {
        Order.addToOrder(item, 1);
    };
    
    this.removeFromOrder = function(item) {
        Order.removeFromOrder(item);
    };
    
    this.totalPrice = function() {
        return Order.total();
    };
}).controller('CartCtrl', function($scope, Order) {
  $scope.items = Order.items;
  
  $scope.$watchCollection('items', function() {
    $scope.totalPrice = Order.totalPrice().toFixed(2);
  }.bind(this));
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x