简单实现IONIC购物车功能
本文实例为大家分享了IONIC购物车的具体代码，供大家参考，具体内容如下
HTML
<divng-app="app">
<divclass="l-header">
<divclass="l-cart">
<divclass="l-cart-count"ng-click="showCart=!showCart">{{calculateTotalProducts()}}</div>
<divclass="l-cart-items"ng-show="showCart">
<divng-show="cart.length">
<ul>
<ling-repeat="itemincart">
<divclass="l-cart-item-name">{{item.product.name}}</div>
<divclass="l-cart-item-quantity">
<inputtype="number"ng-model="item.quantity"ng-change="removeIfZero(item)"/>
</div>
<divclass="l-cart-item-subtotal">{{item.quantity*item.product.price|currency}}</div>
<divclass="remove-item">
<imgsrc="https://cdn3.iconfinder.com/data/icons/cleaning-icons/512/Trash_Can-512.png"ng-click="removeFromCart(item)">
</div>
</li>
</ul>
<divclass="l-cart-total">total<b>{{calculateTotalPrice()|currency}}</b></div>
</div>
<divclass="l-cart-empty"ng-hide="cart.length">tucarritoestávacío</div>
</div>
</div>
</div>
<ulclass="l-stock">
<liclass="l-product"ng-repeat="productinstock"ng-click="addToCart(product)"ng-class="{'is-on-cart':isProductOnCart(product)}">
<divclass="l-product-name">{{product.name}}</div>
<divclass="l-product-price">{{product.price|currency}}</div>
</li>
</ul>
</div>
CSS:
body color#333 padding60px10px10px10px font-familyArial,Helvetica,sans-serif user-selectnone .is-red colorred!important .l-header displayflex justify-contentflex-end align-itemscenter positionfixed top0 right0 left0 height30px padding10px background-color#2c3e50 .l-cart positionrelative .l-cart-count font-size12px font-weight700 width30px line-height30px text-aligncenter color#ecf0f1 background-color#27ae60 border-radius50% cursorpointer .l-cart-items positionabsolute top100% right0 width270px margin10px-10px00 padding10px font-size12px background-color#ecf0f1 &:before content"" positionabsolute bottom100% right15px margin00-2px0 border10pxsolidtransparent border-bottom-color#ecf0f1 li displayflex align-itemscenter padding-bottom10px margin-bottom10px .l-cart-item-name flex1 overflowhidden white-spacenowrap text-overflowellipsis .l-cart-item-quantity width30px margin010px input displayblock bordernone padding5px margin0 width100% text-alignright appearancenone &:focus outlinenone background-color#ffc &::-webkit-outer-spin-button, &::-webkit-inner-spin-button -webkit-appearancenone margin0 .l-cart-item-subtotal color#000 width70px text-alignright .remove-itemimg width:30px height:30px margin010px text-aligncenter .l-cart-total margin-top10 padding-top10px text-alignright border-top1pxsolid#bdc3c7 b font-weight700 font-size1.4em .l-cart-empty text-aligncenter font-size1.4em color#95a5a6 .l-stock &>li floatleft margin010px10px0 &:after content"" clearboth .l-product displayflex color#fff cursorpointer &>div padding10px .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
/**
*Estafuncióngeneraproductosaleatoriamente
*(http://marak.com/faker.js/)
**/
functionfetchStock(){
vari=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})
});
}
returnstock;
};
/**
*AquíempiezanuestrocódigoAngular...
**/
varapp=angular.module('app',[]);
app.run(function($rootScope){
varcart=[],
stock=fetchStock();
varaddToCart=function(product){
varitem=cart.find(function(item){
returnitem.product===product;
});
if(item){
item.quantity++;
}else{
cart.push({
product:product,
quantity:1
});
}
};
varremoveFromCart=function(item){
varindex=cart.indexOf(item);
cart.splice(index,1);
};
varremoveIfZero=function(item){
if(item.quantity<1){
removeFromCart(item);
}
};
varcalculateTotalPrice=function(){
returncart.reduce(function(sum,item){
returnsum+item.quantity*item.product.price;
},0);
};
varcalculateTotalProducts=function(){
returncart.reduce(function(sum,item){
returnsum+item.quantity;
},0);
};
varisProductOnCart=function(product){
returncart.some(function(item){
returnitem.product===product;
});
};
angular.extend($rootScope,{
stock:stock,
cart:cart,
addToCart:addToCart,
removeFromCart:removeFromCart,
removeIfZero:removeIfZero,
calculateTotalPrice:calculateTotalPrice,
calculateTotalProducts:calculateTotalProducts,
isProductOnCart:isProductOnCart
});
});
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。