angularjs购物车结算页面

最新推荐文章于 2021-06-04 00:40:24 发布

原创最新推荐文章于 2021-06-04 00:40:24 发布 · 467 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一个使用Angular开发的购物车应用程序。该应用实现了商品增删、数量调整、总价计算等功能，并通过Checkbox实现全选及批量操作。代码示例展示了如何组织Angular模块、控制器和服务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="angular-1.3.0.js"></script>
	<style>
	.box{
	width: 100%;
	border-bottom: 1px solid silver;
	}
	.box1{
	width: 100%;
	margin-top: 5px;
	}
	.box1 button{
	width: 100px;
	height: 40px;
	background: crimson;
	color: white;
	text-align: center;
	line-height: 40px;
	float: right;
	border: 0;
	border-radius: 13px;
	}
	table{
	width: 100%;
	}
	tr td button{
	background: blue;
	color: white;
	border: 0;
	}

	</style>
	<script>
	var my=angular.module("my",[]);
	my.controller("mys",function ($scope) {
	/声明数据对象，初始化商品信息，数据自拟且不低于四条/
	$scope.arr=[
	{name:"qq",price:12.9,number:2,state:false},
	{name:"wx",price:23.9,number:1,state:false},
	{name:"aa",price:99.9,number:1,state:false},
	{name:"bb",price:10.9,number:5,state:false}
	];
	/删除条目/
	$scope.del=function (index) {
	if(confirm("确定移除此项嘛？")){
	$scope.arr.splice(index,1);
	}
	}
	/点击”+”按钮输入框中的数量加1,同时可以计算出商品小计,和购物车总价/
	$scope.jia=function (index) {
	$scope.arr[index].number++;
	}
	/当点击”-”按钮时输入框中的数量减1,商品小计和总价/
	$scope.jian=function (index) {
	if($scope.arr[index].number>1){
	$scope.arr[index].number--;
	}
	else if($scope.arr[index].number==1){
	if(confirm("用户是否删除该商品")){
	$scope.arr.splice(index,1);
	}
	}
	}
	/计算总价格/
	$scope.allSum=function () {
	var allPrice=0;
	for(var i=0;i<$scope.arr.length;i++){
	allPrice+=$scope.arr[i].price*$scope.arr[i].number;
	}
	return allPrice;
	};
	/清空购物车/
	$scope.alldel=function () {
	if($scope.arr.length==0){
	alert("您的购物车已空");
	}else{
	$scope.arr=[];
	}
	}
	/用户点击第一个checkbox代表全选，全选商品后点击删除选中商品，选中商品被删除，若购物车商品被全部删除后/
	$scope.allCheck=false;
	$scope.allx= function () {
	for(var i=0;i<$scope.arr.length;i++){
	if($scope.allCheck==true){
	$scope.arr[i].state=true;
	}else {
	$scope.arr[i].state=false;
	}
	}
	};
	/每个复选框/
	$scope.itemCheck = function () {
	var flag = 0;
	for(var i = 0; i<$scope.arr.length; i++){
	if($scope.arr[i].state == true){
	flag ++;
	}
	}
	if(flag == $scope.arr.length){
	$scope.allCheck = true;
	}else{
	$scope.allCheck = false;
	}
	};
	/批量删除/
	$scope.pi=function () {
	for(var i=0;i<$scope.arr.length;i++){
	if($scope.arr[i].state==true){
	$scope.arr.splice(i,1);
	i--;
	$scope.allCheck = false;
	}
	}
	}
	});
	</script>
	</head>
	<body ng-app="my" ng-controller="mys">
	<div class="box">
	<h2>我的购物车</h2>
	</div>
	<div class="box1">
	<button ng-click="alldel()" style="margin-right: 10px">清空购物车</button><button ng-click="pi()" style="margin-left: 5px">批量删除</button>
	</div>
	<div class="box2">
	<table border="1">
	<tr>
	<th><input type="checkbox" ng-model="allCheck" ng-click="allx()"/></th>
	<th>name</th>
	<th>price</th>
	<th>number</th>
	<th>totalPrice</th>
	<th>option</th>
	</tr>
	<!--用ng-repaet指令将对象遍历并渲染到页面中-->
	<tr ng-repeat="item in arr">
	<td><input type="checkbox" ng-model="item.state" ng-click="itemCheck()"/></td>
	<td>{{item.name}}</td>
	<td>{{item.price \| currency:"￥："}}</td>
	<td><button ng-click="jian($index)">-</button>
	<input type="text" value="{{item.number}}" style="width: 30px;padding-left: 20px"/>
	<button ng-click="jia($index)">+</button>
	</td>
	<td>{{item.price*item.number \| currency:"￥："}}</td>
	<td><button ng-click="del($index)">删除</button></td>
	</tr>
	<tr>
	<td colspan="6">总金额<span ng-bind="allSum()\|currency:'￥：'"></span></td>
	</tr>
	</table>
	</div>
	</body>
	</html>