angular购物车

最新推荐文章于 2019-06-11 15:57:18 发布

xiaoxianmao666

最新推荐文章于 2019-06-11 15:57:18 发布

阅读量166

点赞数

本文链接：https://blog.csdn.net/xiaoxianmao666/article/details/79371473

版权

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title></title>

<script type="text/javascript" src="../js/angular.min.js" ></script>
<script>

var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.shoplist = [
{id:'1001',name:'iPhone4s',price:'2000',num:1},
{id:'2001',name:'iPhone5s',price:'3650',num:3},
{id:'3001',name:'iPhone6',price:'8000',num:6},
{id:'4001',name:'iPhone8',price:'9645',num:9},
]

//减少数量函数
$scope.jian = function(index){
var num = $scope.shoplist[index].num;
if(num >1){
$scope.shoplist[index].num--;
}else{
if(confirm("再减就需要移除购物车")){
$scope.shoplist.splice(index,1);
}
}
}

//添加数量函数
$scope.add = function(index){
$scope.shoplist[index].num++;
}

//计算购买数量
$scope.nums = function(){
var num = 0;
for(var i = 0;i<$scope.shoplist.length;i++){
num+=$scope.shoplist[i].num;
}
return num;
}

//计算购买总价
$scope.prices = function(){
var price = 0;
for(var i = 0;i<$scope.shoplist.length;i++){
price+=$scope.shoplist[i].price*$scope.shoplist[i].num;
}
return price;
}

//实现移除功能
$scope.remove = function(index){
if(confirm("确定要移除此项？")){
$scope.shoplist.splice(index,1);
}
}

//实现全部移除
$scope.removes = function(){
if(confirm("确定要移除购物车?")){
$scope.shoplist = [];
}
}

})

</script>
</head>
<body ng-app="myApp">
<center>
<table ng-controller="myCtrl" border="1";>

<tr align="center">
<td>产品编号</td>
<td>产品名称</td>
<td>购买数量</td>
<td>产品单价</td>
<td>产品总价</td>
<td>操作</td>
</tr>
<tr align="center" ng-repeat="shop in shoplist">
<td>{{shop.id}}</td>
<td>{{shop.name}}</td>
<td>
<button ng-click="jian($index)">-</button>
<input type="text" placeholder="请输入大于0的数字" ng-model="shop.num" ng-change="change($index)"/>
<button ng-click="add($index)">+</button>
</td>
<td>{{shop.price}}</td>
<td>{{shop.price*shop.num}}</td>
<td><button ng-click="remove($index)">移除</button></td>
</tr>
<tr>
<td ></td>
<td>购买数量</td>
<td ng-bind="nums()"></td>
<td>购买总价</td>
<td ng-bind="prices()"></td>
<td><button ng-click="removes()">移除全部</button></td>
</tr>
</table>
</center>
</body>
</html>

xiaoxianmao666

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angular购物车

var app = angular.module("myApp",[]);app.controller("myCtrl",function($scope){$scope.shoplist = [{id:'1001',name:'iPhone4s',price:'2000',num:1},{id:'2001',name:'iPhone5s',price:'3650',num:3},
复制链接

扫一扫