购物

最新推荐文章于 2024-06-26 15:08:09 发布

zxc2358

最新推荐文章于 2024-06-26 15:08:09 发布

阅读量190

点赞数

本文链接：https://blog.csdn.net/zxc2358/article/details/79829018

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<script>
angular.module("myapp",[])
.controller("ctrl",function($scope,$http){
$http.get("http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=ThirdTest")
.success(function(a){
$scope.datas=a;
})

$scope.qx=function(){
var f=$scope.qq;
for(var i in $scope.datas){
$scope.datas[i].ck=f
}
}
$scope.num=function(){
var c=0;
for(var i in $scope.datas){
c=$scope.datas[i].price*$scope.datas[i].number+c
}
return c;
}

$scope.jian=function(a){
if(a.number>1){
a.number=a.number-1
}else if(a.number==1){
var f=confirm("确认要删除?")
if(f){
for (var i =0;i<$scope.datas.length;i++) {
if($scope.datas[i]==a){
$scope.datas.splice(i,1);
}
}

}
}

}
$scope.delAll=function(){

for(var i = 0;i<$scope.datas.length;i++){
if($scope.datas[i].ck){
$scope.datas.splice(i,1);
i--;
}}
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="ctrl">
<center>
{{datas}}<br />
<button ng-click="delAll()">清空购物车</button>

<table border="1">

<tr>
<td><input type="checkbox" ng-model="qq" ng-click="qx()"></td>
<td>名称</td>
<td>价格</td>
<td>数量</td>
<td>小计</td>
<td>操作</td>
</tr>
<tr ng-repeat="a in datas">
<td><input type="checkbox" ng-model="a.ck"></td>
<td>{{a.name}}</td>
<td>{{a.price}}</td>
<td><button ng-click="a.number=a.number+1">+</button>
<input ng-model="a.number" type="number" min="1" style="width: 40px;"/>
<button ng-click="jian(a)">-</button></td>
<td>{{a.price*a.number}}</td>
<td><button ng-click="del()">删除</button></td>
</tr>
</table>
总计：{{num()}}
</center>
</body>
</html>