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