带价格操作

最新推荐文章于 2022-04-21 16:59:37 发布

V563626266

最新推荐文章于 2022-04-21 16:59:37 发布

阅读量203

点赞数

分类专栏：代码文章标签：购物

本文链接：https://blog.csdn.net/VS563626266/article/details/79726823

版权

代码专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<script>
var app= angular.module("gaoynapp",[]);
app.controller("ctrl",function($scope){
//创建数据
$scope.goods=[{"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.count=function(){
var num=0;
for(var i=0;i<$scope.goods.length;i++){
num=num+$scope.goods[i].gnum;
}
return num;
}
//计算所有的商品数量
$scope.sumhe=function(){
sum=0;
for(var i=0;i<$scope.goods.length;i++){
sum=sum+($scope.goods[i].gnum*$scope.goods[i].gprice);
}
return sum;
}
//验证--删除
$scope.del=function(name){
for(var i=0;i<$scope.goods.length;i++){ //双向绑定：当scope上的数据发生变化时候，视图中所有的scope对象自动发生变化
if($scope.goods[i].gname==name){
$scope.goods.splice(i,1);
}
}
}
//点击减号时候，找当当前商品---判断数量1---如果为1直接从购物车列表中删除
$scope.jian=function(name){
for(var i=0;i<$scope.goods.length;i++){ //双向绑定：当scope上的数据发生变化时候，视图中所有的scope对象自动发生变化
if($scope.goods[i].gname==name&&$scope.goods[i].gnum==0){
var f= confirm("是否把商品从购物成中移除？");
if(f){
$scope.goods.splice(i,1);
}
}else if($scope.goods[i].gname==name){
$scope.goods[i].gnum--;
}
}
}

});
</script>
</head>
<body ng-app="gaoynapp" ng-controller="ctrl">
<h1>我的购物车详情</h1>
<table border="1px">
<tr>
<td colspan="6">
<input type="text" ng-model="g_name" placeholder="根据名称进行查询" />
</td>

</tr>
<tr>
<td ng-click="px='+gid'">商品编号</td>
<td>商品名称</td>
<td>商品数量</td>
<td ng-click="px='-gprice'">商品单价</td>
<td>价格小计</td>
<td>操作</td>
</tr>
<tr ng-repeat="g in goods|orderBy:px|filter:{gname:g_name}">
<td>{{g.gid}}</td>
<td>{{g.gname}}</td>
<td><button ng-click="g.gnum=g.gnum+1">+</button> <input ng-model="g.gnum" type="number" /> <button ng-click="jian(g.gname)">-</button> </td>
<td>{{g.gprice}}</td>
<td>{{g.gnum*g.gprice}}</td> 
<td><button ng-click="del(g.gname)">删除</button></td>
</tr>
</table>
<button>商品总数{{count()}}</button>
<button>商品总价{{sumhe()}}</button>

<button ng-click="goods=[]">清空购物车</button>
</body>

</html>

第二部分

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<title></title>
<script type="text/javascript" src="js/angular.js" ></script>
<script type="text/javascript" src="js/jqu;;;;;;;;;oery-2.1.0.min.js" ></script>
<script>
var app = angular.module("myapp",[]);
app.controller("myspp",function($scope,$http){
$scope.goods = "";
$http({
method:"get",
url:"js/goods.json"
}).then(function success (response){
$scope.goods = response.data;
},function error (reaponse){
$scope.goods = "请求失败";
});
/*赋值*/
$scope.search = "";
$scope.orderCheck = "";
/**/
$scope.delAll = function () {
$scope.goods = "";
}
/*商品总数*/
$scope.sum = function () {
var sum = 0;
for (x in $scope.goods) {
sum += parseInt($scope.goods[x].gnum);
}
return sum;
}
/*商品总价*/
$scope.sumPrice = function () {
var sumPrice = 0;
for (x in $scope.goods) {
sumPrice += $scope.goods[x].gprice * $scope.goods[x].gnum;
}
return sumPrice;
}
/*添加*/
$scope.addShow = false;
$scope.gid = 4;
$scope.gname = "";
$scope.gnum = "";
$scope.gprice = "";
$scope.add = function () {
var good = {};
good.gid = $scope.gid++;
good.gname = $scope.gname;
good.gnum = parseInt($scope.gnum);
good.gprice = $scope.gprice;
$scope.goods.push(good);
$scope.addShow = false;
}

/*移除*/
$scope.del = function (id) {
if(confirm("确定吗")){
for (x in $scope.goods) {
if ($scope.goods[x].gid == id) {
$scope.goods.splice(x,1);
}
}
}
}

/*修改*/
$scope.updateShow = false;
$scope.uname = "";
$scope.unum = "";
$scope.uprice = "";
$scope.uGood = {};
$scope.upt = function (id) {
$scope.updateShow = true;
for (x in $scope.goods) {
if ($scope.goods[x].gid == id) {
$scope.uGood = $scope.goods[x];
}
}

$scope.uname = $scope.uGood.gname;
$scope.unum = $scope.uGood.gnum;
$scope.uprice = $scope.uGood.gprice;

$scope.update = function () {
$scope.uGood.gname = $scope.uname;
$scope.uGood.gnum = parseInt($scope.unum);
$scope.uGood.gprice = $scope.uprice;
$scope.updateShow = false;
}
}

/*全选*/
$scope.bigCheck = false;
$scope.checkAll = function () {
for (x in $scopegoods) {
$scope.goods[x].check = $scope.bigCheck;
}
}

/*批量删除*/
$scope.delMore = function () {
$scope.delgoods = [];
for (x in $scope.goods) {
if ($scope.goods[x].check) {
$scope.delGoods.push($scope.goods[x]);
}
}

for (x1 in $scope.delGoods) {
for (x2 in $scope.goods) {
if ($scope.delGoods[x1] == $scope.goods[x2]) {
$scope.goods.splice(x2,1);
}
}
}
}

/*减
$scope.jian = function (id) {
for (x in $scope.goods) {
if ($scope.goods[x].gid == id) {
if ($scope.goods[x].gnum == 1) {
if (confirm("您确认删除？")) {
$scope.del(id);
}
}else{
$scope.goods[x].gnum--;
}

}
}
}

加
$scope.jia = function (id) {
for (x in $scope.goods) {
if ($scope.goods[x].gid == id) {
$scope.goods[x].gnum++;
}
}
}*/

/*数量的加减*/
$scope.jiaJian = function (id) {
var nub = $("#"+id).val();
var num = parseInt(nub);

if (num <1) {
if (confirm("您确认删除？")) {
$scope.del(id);
}else{
$("#"+id).val(1);
}
}else{
for (x in $scope.goods) {
if ($scope.goods[x].gid == id) {
$scope.uGood[x].gnum = num;
}
}
}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="myspp">
<center>
<span id="title">我的购物车详情</span><br /><br />
<input type="button" value="入库" class="btn" ng-click="addShow = !addShow"/>
<input type="button" value="批量删除" class="btn" ng-click="delMore()"/>
<select class="btn" ng-model="orderCheck">
<option value="">--请选择--</option>
<option value="gid">编号正序</option>
<option value="-gid">编号倒序</option>
<option value="gname">名称正序</option>
<option value="-gname">名称倒序</option>
<option value="gnum">数量正序</option>
<option value="-gnum">数量倒序</option>
<option value="gprice">单价正序</option>
<option value="-gprice">单价倒序</option>
<option value="gnum * gprice">小计正序</option>
<option value="-(gnum * gprice)">小计倒序</option>
</select>
<input type="text" placeholder="根据名称查询" class="btn" ng-model="search"/><br /><br />
<div ng-show="addShow">
商品名称：<input type="text" placeholder="请输入商品名称" ng-model="gname"/><br />
商品数量：<input type="text" placeholder="请输入商品数量" ng-model="gnum"/><br />
商品单价：<input type="text" placeholder="请输入商品单价" ng-model="gprice"/><br />
<input type="button" value="添加" class="btn" ng-click="add()"/>·
</div><br />
<table border="1px" cellspacing="0" cellpadding="0" style="width: 500px;">
<tr style="background-color: grey;">
<th>
<input type="checkbox" ng-model="bigCheck" ng-click="checkAll()" />
</th>
<th>商品编号</th>
<th>商品名称</th>
<th>商品数量</th>
<th>价格小计</th>
<th>操作</th>
</tr>
<tr ng-repeat="x in goods | filter:{gname:search} | orderBy:orderCheck" class="{{$index%2?'red':'green'}}">
<td>
<input type="checkbox" ng-model="x.check" />
</td>
<td>{{x.gid}}</td>
<td>{{x.gname}}</td>
<td>
<input type="number" ng-model="x.gnum" style="width: 70px;" ng-click="jiaJian(x.gid)" id="{{x.gid}}"/>
</td>
<td>{{x.gprice}}</td>
<td>{{x.gnum * x.gprice}}</td>
<td>
<input type="button" value="移除" class="btn" ng-click="del(x.gid)"/>
<input type="button" value="修改" class="btn" ng-click="upt(x.gid)"/>
</td>
</tr>
</table><br />
<div ng-show="updateShow">
商品名称：<input type="text" ng-model="uname"/><br />
商品数量：<input type="text" ng-model="unum"/><br />
商品单价：<input type="text" ng-model="uprice"/><br />
<input type="button" value="修改" class="btn" ng-click="update()"/>

</div><br />
<br />
<span class="span">商品总数：{{sum()}}     </span>
<span class="span">商品总价：{{sumPrice()}}     </span>
<input type="button" value="清空购物车" class="btn" ng-click="delAll()"/>
</center>
</body>
</html>