购物车——总价结算

最新推荐文章于 2021-10-06 13:34:19 发布

Cf1035630950

最新推荐文章于 2021-10-06 13:34:19 发布

阅读量619

点赞数

本文链接：https://blog.csdn.net/Cf1035630950/article/details/78853941

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../js/angular/angular.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.shops = [{
name: "苹果",
price: 3,
num: 5,
state: false
}, {
name: "梨子",
price: 4,
num: 2,
state: false
}, {
name: "香蕉",
price: 3,
num: 3,
state: false
}];

//数量减一
$scope.lessNum = function(shop) {
if(shop.num >= 1) {
shop.num--;
$scope.zongjai = 0;
for(index in $scope.shops) {
if($scope.shops[index].state) {
$scope.zongjai = ($scope.shops[index].price * $scope.shops[index].num) + $scope.zongjai;
}
}
}
}
//数量加一
$scope.addNum = function(shop) {
shop.num++;
$scope.zongjai = 0;
for(index in $scope.shops) {
if($scope.shops[index].state) {
$scope.zongjai = ($scope.shops[index].price * $scope.shops[index].num) + $scope.zongjai;
}
}
}

//计算总价
$scope.zongjai = 0;
$scope.sum = function() {
for(index in $scope.shops) {
if($scope.shops[index].state) {
$scope.zongjai = ($scope.shops[index].price * $scope.shops[index].num) + $scope.zongjai;
}
}
}
})
</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>购物车</h3>
<table border="1px solid blue" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" /></th>
<th>商品名</th>
<th>商品价格</th>
<th>商品数量</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="shop in shops">
<td>
<input type="checkbox" ng-click="sum()" ng-model="shop.state" />
</td>
<td>{{shop.name}}</td>
<td>{{shop.price}}</td>
<td>
<button ng-click="lessNum(shop)">-</button>
<input type="text" size="1" value="{{shop.num}}" />
<button ng-click="addNum(shop)">+</button>
</td>
<td width="50px"><button>删除</button></td>
</tr>
<tr>
<td colspan="5">
总价：<span ng-bind="zongjai"></span>元
</td>
</tr>
</tbody>
</table>
</center>
</body>

</html>