<!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="mycon"> | |
<h2>我的购物车详情</h2> | |
<input type="text" placeholder="根据名称查询" ng-model="searchName" name="" id="" value="" /> | |
<table border="1" cellspacing="0" cellpadding="0"> | |
<thead> | |
<th>商品编号<input type="button" value="{{flag1}}" ng-click="orderById()"</th> | |
<th>商品名称</th> | |
<th>商品数量</th> | |
<th>商品单价</th> | |
<th>价格小计<input type="button" value="{{flag2}}" ng-click="orderByCount()"</th> | |
<th>操作</th> | |
</thead> | |
<tbody> | |
<tr ng-repeat="x in goods|filter:searchName|orderBy:ob"> | |
<td>{{x.gid}}</td> | |
<td>{{x.gname}}</td> | |
<td><input type="number" value="{{x.gnum}}" ng-model="x.gnum" ng-click="reduce(x.gnum)"</td> | |
<td>{{x.gprice}}</td> | |
<td>{{x.gcount=x.gprice*x.gnum}}</td> | |
<td><input type="button" ng-click="delGoods(x.gname)" value="删除"</td> | |
</tr> | |
</tbody> | |
</table> | |
<div>; | |
<span id="stotalNum">商品总数{{gettotalNum()}}</span> | |
<span id="stotalPrice">商品总价{{gettotalPrice()}}</span> | |
<input type="button" name="" id="" value="清空购物车" ng-click="clearGoods()" /> | |
</div> | |
<script type="text/javascript"> | |
var app=angular.module("myapp",[]); | |
app.controller("mycon",function($scope){ | |
$scope.ob=""; | |
$scope.flag1="▲"; | |
$scope.flag2="▲"; | |
$scope.goods=[ | |
{gid:"002",gname:"李柏冰",gnum:14,gprice:44,gcount:800}, | |
{gid:"001",gname:"李柏",gnum:17,gprice:10,gcount:10}, | |
{gid:"005",gname:"李冰",gnum:18,gprice:12,gcount:104}, | |
{gid:"004",gname:"柏冰",gnum:11,gprice:121,gcount:104400}, | |
]; | |
$scope.isClick=true; | |
$scope.orderByCount=function(){ | |
if($scope.isClick){ | |
$scope.ob="gcount"; | |
$scope.flag2="▲"; | |
$scope.isClick=false; | |
}else{ | |
$scope.ob="-gcount"; | |
$scope.isClick=true; | |
$scope.flag2="▼"; | |
} | |
} | |
$scope.delGoods=function(name){ | |
for (var i = 0; i < $scope.goods.length; i++) { | |
if($scope.goods[i].gname==name){ | |
$scope.goods.splice(i,1); | |
break; | |
} | |
} | |
} | |
$scope.orderById=function(){ | |
if($scope.isClick){ | |
$scope.ob="gid"; | |
$scope.isClick=false; | |
$scope.flag1="▲"; | |
}else{ | |
$scope.isClick=true; | |
$scope.ob="-gid"; | |
$scope.flag1="▼"; | |
} | |
} | |
$scope.gettotalNum=function(){ | |
var totalNum=0; | |
for (var i = 0; i < $scope.goods.length; i++) { | |
totalNum+=$scope.goods[i].gnum; | |
} | |
return totalNum; | |
}; | |
$scope.gettotalPrice=function(){ | |
var totalPrice=0; | |
for (var i = 0; i < $scope.goods.length; i++) { | |
totalPrice+=($scope.goods[i].gprice); | |
} | |
return totalPrice; | |
} | |
$scope.clearGoods=function(){ | |
$scope.goods=[]; | |
} | |
}); | |
</script> | |
</body> | |
</html> | |
单个排序的上下箭头
最新推荐文章于 2022-03-25 11:20:50 发布