Angular: Empty Fiddle

http://angularjs.org/

by iBertel

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://cdn.rawgit.com/snapjay/ngCart/0.0.3-rc.2/dist/ngCart.js"></script>
<div ng-controller="myCtrl">

  <div class="row">

    <div class="col-xs-offset-8 col-xs-4">
      <h3>Summary <span>(ngcart-summary)</span></h3>

      <ngcart-summary></ngcart-summary>
    </div>
  </div>
  <hr />
  <h3>Add to Cart <span>(ngcart-addtocart)</span></h3>
  <div class="row">
    <div class="col-xs-6 col-sm-3">
      <h4>My Item #1</h4>
      <p> $10.99</p>
      <ngcart-addtocart id="item1" name="My Item #1" price="10.99" quantity="1" quantity-max="5">Add to Cart</ngcart-addtocart>
    </div>
    <div class="col-xs-6 col-sm-3">
      <h4>My Item #2</h4>
      <p> $15.29</p>
      <ngcart-addtocart id="item2" name="My Item #2" price="15.29" quantity="1" quantity-max="5">Add to Cart</ngcart-addtocart>
    </div>
    <div class="col-xs-6 col-sm-3">
      <h4>My Item #3</h4>
      <p> $25.75</p>
      <ngcart-addtocart id="item3" name="My Item #3" price="25.75" quantity="3" quantity-max="10">Add to Cart</ngcart-addtocart>
    </div>
    <div class="col-xs-6 col-sm-3">
      <h4>My Item #4</h4>
      <p> $29.25</p>
      <ngcart-addtocart id="item4" name="My Item #4" price="29.25" quantity="1" quantity-max="10">Add to Cart</ngcart-addtocart>
    </div>
  </div>

  <hr/>
  <h3>Cart <span> (ngcart-cart)</span></h3>

  <ngcart-cart></ngcart-cart>

  <hr/>

  <div class="row">
    <div class="col-md-12">

      <h3>Checkout <span> (ngcart-checkout)</span></h3>


      <div class="row">
        <div class="col-xs-4">
          <h4>service 'log'</h4>
          <ngcart-checkout service="log">Checkout</ngcart-checkout>
        </div>
        <div class="col-xs-4">
          <h4>service 'http'</h4>
          <ngcart-checkout service="http" settings="httpSettings">Checkout </ngcart-checkout>
  ...

CSS

hr {
  margin: 40px 0;
}

h3 {
  color: #1758AA
}

h3 span {
  font-size: 14px;
  display: block;
}

span[ng-click] {
  cursor: pointer;
}

JavaScript

var myApp = angular.module('myApp', ['ngCart']);

myApp.controller('myCtrl', ['$scope', '$http', 'ngCart', function($scope, $http, ngCart) {
  ngCart.setTaxRate(7.5);
  ngCart.setShipping(2.99);
}]);