HTML
<div ng-app="app">
<div class="l-header">
<div class="l-cart">
<div class="l-cart-count" ng-click="showCart = !showCart">{{ calculateTotalProducts() }}</div>
<div class="l-cart-items" ng-show="showCart">
<div ng-show="cart.length">
<ul>
<li ng-repeat="item in cart">
<div class="l-cart-item-name">{{ item.product.name }}</div>
<div class="l-cart-item-quantity">
<input type="number" ng-model="item.quantity" ng-change="removeIfZero(item)" />
</div>
<div class="l-cart-item-subtotal">{{ item.quantity * item.product.price | currency }}</div>
<div class="remove-item">
<img src="https://cdn3.iconfinder.com/data/icons/cleaning-icons/512/Trash_Can-512.png" ng-click="removeFromCart(item)">
</div>
</li>
</ul>
<div class="l-cart-total">total <b>{{ calculateTotalPrice() | currency }}</b></div>
</div>
<div class="l-cart-empty" ng-hide="cart.length">tu carrito está vacío</div>
</div>
</div>
</div>
<ul class="l-stock">
<li class="l-product" ng-repeat="product in stock" ng-click="addToCart(product)" ng-class="{'is-on-cart': isProductOnCart(product)}">
<div class="l-product-name">{{ product.name }}</div>
<div class="l-product-price">{{ product.price | currency }}</div>
</li>
</ul>
</div>
CSS:
body
color #333
padding 60px 10px 10px 10px
font-family Arial, Helvetica, sans-serif
user-select none .is-red
color red !important .l-header
display flex
justify-content flex-end
align-items center
position fixed
top 0
right 0
left 0
height 30px
padding 10px
background-color #2c3e50 .l-cart
position relative .l-cart-count
font-size 12px
font-weight 700
width 30px
line-height 30px
text-align center
color #ecf0f1
background-color #27ae60
border-radius 50%
cursor pointer .l-cart-items
position absolute
top 100%
right 0
width 270px
margin 10px -10px 0 0
padding 10px
font-size 12px
background-color #ecf0f1 &:before
content ""
position absolute
bottom 100%
right 15px
margin 0 0 -2px 0
border 10px solid transparent
border-bottom-color #ecf0f1 li
display flex
align-items center
padding-bottom 10px
margin-bottom 10px .l-cart-item-name
flex 1
overflow hidden
white-space nowrap
text-overflow ellipsis .l-cart-item-quantity
width 30px
margin 0 10px input
display block
border none
padding 5px
margin 0
width 100%
text-align right
appearance none &:focus
outline none
background-color #ffc &::-webkit-outer-spin-button,
&::-webkit-inner-spin-button
-webkit-appearance none
margin 0 .l-cart-item-subtotal
color #000
width 70px
text-align right .remove-item img
width:30px
height:30px
margin 0 10px
text-align center .l-cart-total
margin-top 10
padding-top 10px
text-align right
border-top 1px solid #bdc3c7 b
font-weight 700
font-size 1.4em .l-cart-empty
text-align center
font-size 1.4em
color #95a5a6 .l-stock & > li
float left
margin 0 10px 10px 0 &:after
content ""
clear both .l-product
display flex
color #fff
cursor pointer & > div
padding 10px .l-product-name
background-color #2980b9 .l-product-price
background-color #3498db .is-on-cart .l-product-name
background-color #27ae60 .l-product-price
background-color #2ecc71
JS
/**
* Esta función genera productos aleatoriamente
* (http://marak.com/faker.js/)
**/
function fetchStock () { var i = 0,
stock = [],
total = faker.random.number({min: 10, max: 30}); for (i = 0; i < total; i++) { stock.push({
name : faker.commerce.productName(),
price: faker.random.number({min: 1, max: 500})
});
} return stock;
}; /**
* Aquí empieza nuestro código Angular...
**/ var app = angular.module('app', []); app.run(function ($rootScope) { var cart = [],
stock = fetchStock(); var addToCart = function (product) { var item = cart.find(function (item) { return item.product === product;
}); if (item) { item.quantity++; } else { cart.push({
product : product,
quantity: 1
});
}
}; var removeFromCart = function (item) { var index = cart.indexOf(item); cart.splice(index, 1);
}; var removeIfZero = function (item) { if (item.quantity < 1) { removeFromCart(item);
}
}; var calculateTotalPrice = function () { return cart.reduce(function (sum, item) { return sum + item.quantity * item.product.price; }, 0);
}; var calculateTotalProducts = function () { return cart.reduce(function (sum, item) { return sum + item.quantity; }, 0);
}; var isProductOnCart = function (product) { return cart.some(function (item) { return item.product === product;
});
}; angular.extend($rootScope, {
stock: stock,
cart: cart,
addToCart: addToCart,
removeFromCart: removeFromCart,
removeIfZero: removeIfZero,
calculateTotalPrice: calculateTotalPrice,
calculateTotalProducts: calculateTotalProducts,
isProductOnCart: isProductOnCart
});
});