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