IONIC之简易购物车

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