angularjs简单实现购物车需求

最新推荐文章于 2024-07-12 16:27:40 发布

android1986

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量97

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wsq110/p/7681414.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../angular-1.5.5/angular.js"></script>
<script>
var myapp=angular.module("myapp",[]);
var data=[
{
done:false,
name:"小米",
price:666,
count:2,

},
{
done:false,
name:"华为",
price:888,
count:1,

},
{
done:false,
name:"苹果",
price:299,
count:5,

},
{
done:false,
name:"小辣椒",
price:555,
count:1,

},
{
done:false,
name:"坚果",
price:1999,
count:5,

}
]

myapp.controller("myCtrl",function ($scope) {
$scope.data=data;
$scope.num=0;

//实际付款
$scope.money=function () {
$scope.numsn=0;

if( $scope.num>9999)
{
$scope.numsn=$scope.num;
}
else
{
if($scope.numsn!=0)
{
$scope.numsn=$scope.num+10;
}
}
return $scope.numsn;

}
//判断是否包邮
$scope.baoyou=function () {
$scope.nums="";
if( $scope.num>9999)
{
$scope.nums="包邮";
}
else
{
$scope.nums="十元";
}
return $scope.nums;
}
//商品总价
$scope.counts=function () {
$scope.num=0;
$scope.n=0;
for(var i=0;i<$scope.data.length;i++)
{
if($scope.data[i].done==true)
{
$scope.num+=$scope.data[i].price*$scope.data[i].count;
$scope.n++;
}

}
/* if($scope.n==$scope.data.length)
{
$scope.chec=true;
}*/

}
/*删除*/
$scope.del=function (name) {
for(var i=0;i<$scope.data.length;i++) {

if($scope.data[i].name==name)
{
$scope.data.splice(i,1);
}
}

}
//删除选中的
$scope.delall=function () {
for(var i=0;i<$scope.data.length;i++)
{
if($scope.data[i].done==true)
{
$scope.data.splice(i,1);
i--;
}
}
}
//小计
$scope.xj=function (a,b) {
$scope.nums=a*$scope.data[b].price;
$scope.counts();
return $scope.nums;

}
//点击全选
$scope.checkAll=function () {
for(var i=0;i<$scope.data.length;i++)
{
if($scope.chec==true)
{
$scope.data[i].done=true;
}
else{
$scope.data[i].done=false;
}
}
$scope.num=0;
for(var i=0;i<$scope.data.length;i++)
{
if($scope.data[i].done==true)
{
$scope.num+=$scope.data[i].price*$scope.data[i].count;

}
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<button ng-click="delall()">删除选中的</button>
<table border="1" bordercolor="#000000" width="500" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>全选<span><input type="checkbox" ng-click="checkAll()" ng-model="chec"></span></th>
<th>商品名称</th>
<th>单价</th>
<th>购买数量</th>
<th>小计</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in data">
<td><input type="checkbox" ng-model="item.done" ng-click="counts()"></td>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td><input type="number" ng-model="item.count"></td>
<td>{{xj(item.count,$index)|currency:"RMB"}}</td>
<td><button ng-click="del(item.name)">删除</button></td>
</tr>
</tbody>
</table>
<div>商品总价:<span>{{num}}</span></div>
<div>邮费:<span>{{baoyou()}}</span></div>
<div>实际付款:<span>{{money()}}</span></div>
</body>
</html>

转载于:https://www.cnblogs.com/wsq110/p/7681414.html

android1986

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angularjs简单实现购物车需求

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../angular-1.5.5/angular.js"></script> &...
复制链接

扫一扫