hhkf月考

最新推荐文章于 2023-08-05 13:56:20 发布

原创最新推荐文章于 2023-08-05 13:56:20 发布 · 252 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用Angular框架实现的购物车应用案例。该应用通过AngularJS模块化开发，实现了商品展示、数量修改、商品移除及清空购物车等功能，并采用自定义指令和表达式进行数据绑定与操作。

<!DOCTYPE html>
<html ng-app="App">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="application/javascript" src="js/angular.min.js"></script>
		<script>
			var app = angular.module("App",[]);
			app.controller("Democtrl",function($scope){
				$scope.datas = [{ gid: 001, gname: "手机", gnum: 3, gprice: 1000, gcount: 3000 },  
                { gid: 002, gname: "电脑", gnum: 3, gprice: 2000, gcount: 6000 },   
                { gid: 003, gname: "电视", gnum: 6, gprice: 500,gcount: 3000 }];
                
                $scope.del = function($index){
                	$scope.datas.splice($index,1);
                }
                $scope.orderkey = "";
                $scope.counts=function(){
                	var a = 0;
                	for(var i = 0;i<$scope.datas.length;i++){
                		a+=$scope.datas[i].gnum;
                	}
                	return a;
                }
                $scope.prices = function(){
                	var a = 0;
                	for(var i=0;i<$scope.datas.length;i++){
                		a+=$scope.datas[i].gnum*$scope.datas[i].gprice;
                	}
                	return a;
                }
                $scope.Alldel = function(){
                	for(var i = $scope.datas.length;i>=0;i--){
                		$scope.datas.splice(i,1);
                	}
                }
                $scope.chan = function($index){
                	if($scope.datas[$index].gnum<=0){
                		var f = confirm("确定删除该产品?");
                		if(f){
                			$scope.datas.splice($index,1);
                		}
                	}
                }
			});
		</script>
		
		<style type="text/css">
			tr:nth-child(obb){
				background-color: cyan;
			}
			tr:nth-child(even){
				background-color: sandybrown;
			}
		</style>
		
	</head>
	<body ng-controller="Democtrl">
		<h1 style="text-align: center;">我的购物车详情</h1>
		<input type="text" placeholder="根据商品名称查询" ng-model="searchcommodity" style="margin-left: 550px;  background-color: yellow;"/>
		<table border="1" cellspacing="0" cellpadding="1" style="margin-left: 240px;" style="margin-top: 20px;">
			<tr style="background-color: darkgray;">
				<td>商品编号<input type="button" value="∧" ng-click="orderkey='gid'"/></td>
				<td>商品名称</td>
				<td>商品数量</td>
				<td>商品单价</td>
				<td>价格小计<input type="button" value="∨" ng-click="orderkey='-gnum*gprice'"/></td>
				<td>操作</td>
			</tr>
			<tr ng-repeat ="x in datas | orderBy : orderkey |filter:{gname:searchcommodity}">
				<td>{{x.gid}}</td>
				<td>{{x.gname}}</td>
				<td ><input type="number" value="{{x.gnum}}" ng-model="x.gnum" ng-change="chan($index)"/></td>
				<td>{{x.gprice}}</td>
				<td>{{x.gnum*x.gprice}}</td>
				<td ><input type="button" value="移除" ng-click="del($index)"/></td></tr>  
			</tr>
		</table>
		<div style="margin-left: 300px;">
			商品总数:{{counts()}}  商品总价:{{prices()}}
			<input type="button" value="清空购物车" ng-click="Alldel()" style="margin-left: 60px; background-color: yellow;"/>
		</div>
	</body>
</html>