简单实现IONIC购物车功能

<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>

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

/*** 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 });});