本文实例为大家分享了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 });});

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。