小计 - 代码天地

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
tr:nth-child(odd){
background: #00FFFF;
}
tr:nth-child(even){
background: #DC143C;
}
</style>
<script type="text/javascript" src="js/angular.js" ></script>
<script>
var app=angular.module("myApp",[]);
app.controller("ctrl",function($scope){
$scope.stus=[{ gid: 001, gname: '手机', gnum: 3, gprice: 1000, gcount: 3000 },
{ gid: 002, gname: '电脑', gnum: 3, gprice: 2000, gcount: 6000 },
{ gid: 003, gname: '电视', gnum: 6, gprice: 500, gcount: 3000 }]

//总金额
$scope.gum=function(){
count = 0;
for(var i in $scope.stus){
count=count+$scope.stus[i].gnum*$scope.stus[i].gprice;
}
return count;
}
//总数量
$scope.gnum=function(){
count = 0;
for(var i in $scope.stus){
count=count+$scope.stus[i].gnum;
}
return count;
}
$scope.count=function(gnum,gname){
//根据索引查找对象
console.log("根据索引查找的对象",$scope.stus[i]);
for(var i=0;i<$scope.stus.length;i++){
if($scope.stus[i].gname==gname){
$scope.stus[i].gnum=$scope.stus[i].gnum+gnum;
}
}
}
//验证--删除
$scope.dele=function(gname){
for(var i=0;i<$scope.stus.length;i++){ //双向绑定：当scope上的数据发生变化时候，视图中所有的scope对象自动发生变化
if($scope.stus[i].gname==gname){
$scope.stus.splice(i,1);
}
}
}
//点击减号时候，找当当前商品---判断数量1---如果为1直接从购物车列表中删除
$scope.jian=function(name){
for(var i=0;i<$scope.stus.length;i++){ //双向绑定：当scope上的数据发生变化时候，视图中所有的scope对象自动发生变化
if($scope.stus[i].gname==name&&$scope.stus[i].gnum==0){
var f= confirm("是否把商品从购物成中移除？");
if(f){
$scope.stus.splice(i,1);
}
}else if($scope.stus[i].gname==name){
$scope.stus[i].gnum--;
}
}
}
//清空所有
$scope.clear=function(){
if(window.confirm("确定要清空购物车吗？")){
$scope.stus=[];
}
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="ctrl">

<h1 style="align-content: ;">我的购物车详情</h1>

<table border="1" >
<tr >
<td colspan="6" ><input type="text" style=" float: right; background: yellow; margin-right: 10px;" ng-model="mc" placeholder="根据名称查询" />
</td>
</tr>

<tr>
<td>
<select ng-model="px">
<option value="">商品编号</option>
<option value="+gid">编号正序排列</option>
<option value="-gid">编号倒序序排列</option>
</select>

</td>
<td>商品名称</td>
<td>商品数量</td>
<td>商品单价</td>
<td>
<select ng-model="px">
<option value="">价格小计</option>
<option value="-gcount">价格倒序排列</option>
</select>
</td>
<td>操作</td>
</tr>
<tr ng-repeat="s in stus|filter:{gname:mc}|orderBy:px">
<td>{{s.gid}}</td>
<td>{{s.gname}}</td>
<td>
<button ng-click="count(+1,s.gname)">+</button> <input style="width: 30px;" ng-model="s.gnum" /><button ng-click="jian(s.gname)">－</button>
</td>
<td>{{s.gprice}}</td>
<td>{{s.gcount}}</td>
<td><button ng-click="dele(s.gname)" style="background: yellow;">移除</button></td>
</tr>
</table>
<button style="background:#00FFFF ;">商品数量:{{gnum()}}</button>
<button style="background:#00FFFF ;">商品总价:{{gum()}}</button>
<button ng-click="clear()" style="background-color: yellow;">清空购物车</button>
</body>
</html>

小计

猜你喜欢