<!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>
<style type="text/css">
.greenline{
background-color: greenyellow;
}
.pinkline{
background-color: deeppink;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<center>
<h1>我的购物车详情</h1>
<input type="" style="background-color: yellow; border-radius: 10px;" placeholder="根据名称查询" ng-model="keyy" /><br /><br />
<table border="1" cellpadding="0" cellspacing="0" width="40%">
<tr style="background-color: gray;">
<th>商品编号</th>
<th>商品名称</th>
<th>商品数量</th>
<th>商品单价
<input type="button" value="^" ng-click="dan()" />
<input type="button" value="v" ng-click="gr()"/>
</th>
<th>价格小计</th>
<th>操作</th>
</tr>
<tr ng-repeat="x in shops|filter:{name:keyy}|orderBy:pai" class="{{$index%2==0?'greenline':'pinkline'}}" style="text-align: center;">
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>
<input type="button" value="+" style="background-color: gray;" ng-click="up(x.id)" />
{{x.num}}
<input type="button" value="-" style="background-color: gray;" ng-click="down(x.id)" />
</td>
<td>{{x.price}}</td>
<td>{{(x.num*x.price)}}</td>
<td><input type="button" value="移除" style="background-color: yellow;" ng-click="del(x.id)" ></td>
</tr>
</table><br /><br />
<input type="button" value="商品数量" style="background-color:forestgreen;"/>{{he()}}
<input type="button" value="商品总价" style="background-color:forestgreen;"/>{{jia()}}
<input type="button" value="清空购物车" style="background-color: yellow;" ng-click="delall()" />
</center>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope){
$scope.shops=[{id:"001",name:"手机",num:3,price:1000,count:3000},
{id:"002",name:"电脑",num:3,price:2000,count:6000},
{id:"003",name:"电脑",num:6,price:500,count:3000}];
$scope.del=function(id){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].id==id){
$scope.shops.splice(i,1);break;
}
}
}
$scope.he=function(){
var he=0;
for (var i = 0; i < $scope.shops.length; i++) {
he+=$scope.shops[i].num;
}
return he;
}
$scope.jia=function(){
var jia=0;
for (var i = 0; i < $scope.shops.length; i++) {
jia+=$scope.shops[i].price;
}
return jia;
}
$scope.delall=function(){
confirm("确定要清空购物车吗?");
$scope.shops=[];
}
$scope.up=function(id){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].id==id){
$scope.shops[i].num++;
}
}
}
$scope.down=function(id){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].num<1){
alert("再减少就要删除了");
$scope.shops.splice(i,1);
break;
}
if($scope.shops[i].id==id){
$scope.shops[i].num--;
}
}
}
$scope.dan=function(){
$scope.pai="price";
}
$scope.gr=function(){
$scope.pai="-price";
}
})
</script>
</body>
</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>
<style type="text/css">
.greenline{
background-color: greenyellow;
}
.pinkline{
background-color: deeppink;
}
</style>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<center>
<h1>我的购物车详情</h1>
<input type="" style="background-color: yellow; border-radius: 10px;" placeholder="根据名称查询" ng-model="keyy" /><br /><br />
<table border="1" cellpadding="0" cellspacing="0" width="40%">
<tr style="background-color: gray;">
<th>商品编号</th>
<th>商品名称</th>
<th>商品数量</th>
<th>商品单价
<input type="button" value="^" ng-click="dan()" />
<input type="button" value="v" ng-click="gr()"/>
</th>
<th>价格小计</th>
<th>操作</th>
</tr>
<tr ng-repeat="x in shops|filter:{name:keyy}|orderBy:pai" class="{{$index%2==0?'greenline':'pinkline'}}" style="text-align: center;">
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>
<input type="button" value="+" style="background-color: gray;" ng-click="up(x.id)" />
{{x.num}}
<input type="button" value="-" style="background-color: gray;" ng-click="down(x.id)" />
</td>
<td>{{x.price}}</td>
<td>{{(x.num*x.price)}}</td>
<td><input type="button" value="移除" style="background-color: yellow;" ng-click="del(x.id)" ></td>
</tr>
</table><br /><br />
<input type="button" value="商品数量" style="background-color:forestgreen;"/>{{he()}}
<input type="button" value="商品总价" style="background-color:forestgreen;"/>{{jia()}}
<input type="button" value="清空购物车" style="background-color: yellow;" ng-click="delall()" />
</center>
<script type="text/javascript">
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope){
$scope.shops=[{id:"001",name:"手机",num:3,price:1000,count:3000},
{id:"002",name:"电脑",num:3,price:2000,count:6000},
{id:"003",name:"电脑",num:6,price:500,count:3000}];
$scope.del=function(id){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].id==id){
$scope.shops.splice(i,1);break;
}
}
}
$scope.he=function(){
var he=0;
for (var i = 0; i < $scope.shops.length; i++) {
he+=$scope.shops[i].num;
}
return he;
}
$scope.jia=function(){
var jia=0;
for (var i = 0; i < $scope.shops.length; i++) {
jia+=$scope.shops[i].price;
}
return jia;
}
$scope.delall=function(){
confirm("确定要清空购物车吗?");
$scope.shops=[];
}
$scope.up=function(id){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].id==id){
$scope.shops[i].num++;
}
}
}
$scope.down=function(id){
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].num<1){
alert("再减少就要删除了");
$scope.shops.splice(i,1);
break;
}
if($scope.shops[i].id==id){
$scope.shops[i].num--;
}
}
}
$scope.dan=function(){
$scope.pai="price";
}
$scope.gr=function(){
$scope.pai="-price";
}
})
</script>
</body>
</html>