当前位置:首页 » 网购平台 » h5xie购物车
扩展阅读
宁波奥德赛优惠价格 2021-03-15 14:26:02
丹尼斯购物卡能挂失么 2021-03-15 14:25:58
淘宝购物指纹验证失败 2021-03-15 14:24:44

h5xie购物车

发布时间: 2021-02-22 11:47:40

① 长城h5柴油车柴油箱放油螺丝在哪

一般的柴油车 柴油箱的放油螺丝都在油箱最底下啊

② angular js 带复选框购物车怎么写

前段时间研究过这个,并且写了一个购物车的小例子,今天一个偶然的机会提起,可惜忘了差不多了,糊里糊涂的也没说清楚。翻出来,提醒下自己,保持一颗学习的心,顺便再复习一遍。
先上一个最终的效果图

构图比较简单,主要功能:
1. 点击购买的时候 进行数量的增加或者条目的增加,同时总价格变化;
2. 进行删除的时候,删除当前条目,总价变化;
3. 进行数目增加减少的时候,总价格变化;
好,下面说代码,抓耳挠腮的想想,有点久远印象不太深刻了;
关于angular的基本用法,这里就不唠叨了,网上好多的教程;
首先是商品列表,这里自己随意列举了一些

<script>
var items = [{
id : '1',
name : '蜂蜜',
price : 30.00
},{
id : '2',
name : '黄豆酱',
price : 15.8
},
{
id : '3',
name : '护手霜',
price : 15.00
},
{
id : '4',
name : '保温杯',
price : 29.9
},
{
id : '5',
name : '鼠标',
price : 39.9
},{
id : '6',
name : '米老头',
price : 8.8
}];
//购物车中的数据;
var boughtList = {};
</script>

主要的html代码,重新注释下也让自己再熟悉一遍

<div class="wrap" ng-controller="showItem"><!-- ng-controller ng的语法 -->
<h5>商品列表</h5>
<div class="left itembox border" >
<ul>
<li class="left" ng-repeat="value in items" item-id={{value.id}}>
<p>{{value.name}}</p>
<p> {{value.price}}</p>
<p>
<a href="javascript:void(0);" ng-click="buyAction($event);"
name={{value.name}} price={{value.price}} item-id={{value.id}} >购买</a>
<!-- dom 事件时的$event 就相当于普通dom事件中的window.event 对象-->
</p>
</li>
</ul>
</div>

<!-- 购物车中的数据 -->
<div class="boughtlist border">
<ul>
<li ng-repeat="value in boughtList" item-id={{value.id}}>
<span>{{value.name}}</span>
<span>{{value.price}}</span>
<span style="width:100px;" item-id={{value.id}}>
<a href="javascript:void(0);" ng-click="value.num=value.num+1;changeNum($event,value.num);" >+</a>
<input class="border" type="number" min=0 ng-model="value.num" ng-init="value.num=1" ng-change="changeNum(value.id,value.num);"/>
<!-- 这里的ng-change 是值发生变化时触发的事件,其实这里我原先想处理成 一个自动的mvc过程,无果,只好加事件了-->
<a href="javascript:void(0);" ng-click="value.num=value.num-1;changeNum($event,value.num);">-</a>
</span>
<a href="javascript:void(0);" item-id={{value.id}} ng-click="delItem($event);" >删除</a>
</li>
</ul>
<p ng-init=0 >总价格:{{ total | number:1}}</p>
<!-- angular的优势体现,number:1也就是number数据,小数点后一位。-->
</div>

我记得,当时觉得比较麻烦的是 input没有ng-blur事件;
看下js代码

var ng = angular;
var myapp = ng.mole('myapp',[]);

var common = {
getTotal : function(total){ //每次重新清零 算出总价,这样的话为什么还要传total参数?当时怎么想的?
total = 0;
for(var k in boughtList){
if(boughtList[k]){
if(boughtList[k].num <=0){
boughtList[k].num = 0;
}
total += boughtList[k].num*boughtList[k].price;
}
}
return total;
}
}

myapp.controller('showItem',function($scope){
$scope.items = items;
$scope.boughtList = boughtList;
$scope.total = 0;
for(var k in boughtList){
if(boughtList[k]){
$scope.total += boughtList[k].num*boughtList[k].price;
}
}
$scope.buyAction = function($event){
var el = $event.target;
var id = el.getAttribute('item-id');
if(boughtList[id]){
boughtList[id].num += 1;
}else{
var arr = [];
arr.name = el.getAttribute('name');
arr.price = el.getAttribute('price');
arr.num = 1;
arr.id = id;
boughtList[id] = arr;
}
$scope.total = common.getTotal($scope.total);
}

$scope.delItem = function($event){
var li = $event.target.parentNode;
li.parentNode.removeChild(li);
var id = $event.target.getAttribute('item-id');
if(boughtList[id]){
delete boughtList[id];
}
$scope.total = common.getTotal($scope.total);
}
$scope.changeNum = function($event,num){
var id;
if(typeof $event == 'string'){
id = $event;
}else{
id = $event.target.parentNode.getAttribute('item-id');
}

boughtList[id].number = num;
$scope.total = common.getTotal($scope.total);
}
});