<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>实现简单购物车功能</title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<h3>您的购物车</h3>
<table border="1px" cellspacing="0px" cellpadding="0px" class="t">
<tr>
<td>商品名</td>
<td>数量</td>
<td>单价</td>
<td>小计</td>
</tr>
<tr ng-repeat="good in goods">
<td>{{good.name}}</td>
<td>{{good.count}}</td>
<td>{{good.price|currency:"RMB¥"}}</td>
<td>{{good.count*good.price|currency:"RMB¥"}}<input type="button" value="删除" ng-click="dele($index)" /><input type="button" value="添加" ng-click="add($index)" /></td>
</tr>
</table>
<div class="sum">
总金额:{{sum}}
</div>
<!--
js里面
1.定义数组
2.实现删除
-->
<script type="text/javascript">
var mo = angular.module("myApp", []);
mo.controller("myCtrl", function($scope) {
//定义一个数组
$scope.goods = [{
"name": "鼠标",
"count": "1",
"price": "15"
}, {
"name": "键盘",
"count": "3",
"price": "40"
}, {
"name": "耳机",
"count": "1",
"price": "100"
}];
//显示总金额
var sum1 = 0;
for (var i = 0; i < $scope.goods.length; i++) {
sum1 += $scope.goods[i].count * $scope.goods[i].price;
}
//赋值个总金额
$scope.sum = sum1;
//删除
$scope.dele = function($index) {
// alert($index);
$scope.goods.splice($index, 1);
//删除完毕,将总金额再计算一遍
var sum1 = 0;
for (var i = 0; i < $scope.goods.length; i++) {
sum1 += $scope.goods[i].count * $scope.goods[i].price;
}
//赋值个总金额
$scope.sum = sum1;
//提示
if ($scope.goods.length == 0) {
alert("购物车空了");
}
}
//添加
$scope.add = function($index){
$scope.goods[$index].count++;
var sum1 = 0;
for (var i = 0; i < $scope.goods.length; i++) {
sum1 += $scope.goods[i].count * $scope.goods[i].price;
}
//赋值个总金额
$scope.sum = sum1;
}
});
</script>
</body>
</html>
Angular,js实现简单购物车功能
最新推荐文章于 2023-06-30 11:11:40 发布