<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="libs/angular.min.js"></script>
<script src="libs/jquery-1.11.0.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtli", function($scope, $http) {
$http.get("aa.json").then(function(response) {
$scope.goods = response.data;
});
$scope.showTa = true;
$scope.zon = function() {
var r = 0;
for(var i = 0; i < $scope.goods.length; i++) {
r += ($scope.goods[i].price * $scope.goods[i].num);
}
return r;
}
//数量减减
$scope.jian = function(aa) {
$scope.goods[aa].num--;
} //数量佳佳
$scope.jia = function(aa) {
$scope.goods[aa].num++;
}
$scope.shanchu = function(gname) {
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].name == gname) {
$scope.goods.splice(i, 1);
break;
}
}
if($scope.goods.length == 0) {
$scope.showTa = true;
}
}
//批量删除
$scope.deleteMore = function() {
if($scope.checkAll) {
$scope.goods = [];
} else {
var checked = $("input[type=checkbox]:checked");
for(var i = checked.length - 1; i >= 0; i--) {
$scope.goods.splice(checked[i].value, 1);
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtli">
<center>
<h1 style="color: red;">我的购物车</h1>
<hr />
<div style=" margin-left: 600px;"><input type="button" value="♐批量删除" style="background: #FF0000;" ng-click="deleteMore()" /></div>
<table border="1px" ng-show="showTa">
<tr>
<th><input type="checkbox" ng-model="checkAll" /></th>
<th>名字</th>
<th>价钱</th>
<th>数量</th>
<th>总和</th>
<th>操作</th>
</tr>
<tr ng-repeat=" g in goods">
<td> <input type="checkbox" value="{{$index}}" ng-model="checkAll" /> </td>
<td>{{g.name}}</td>
<td>{{g.price | currency}}</td>
<td>
<button ng-click="jian($index)">-</button> {{g.num}}
<button ng-click="jia($index)">+</button>
</td>
<td>
{{g.he=g.price * g.num | currency}}
</td>
<td>
<input type="button" ng-click="shanchu(g.name)" value="删除" />
</td>
</tr>
<tr>
<td colspan="6"><input type="text" value="总价为{{zon()}}" /></td>
</tr>
</table>
</center>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="libs/angular.min.js"></script>
<script src="libs/jquery-1.11.0.min.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtli", function($scope, $http) {
$http.get("aa.json").then(function(response) {
$scope.goods = response.data;
});
$scope.showTa = true;
$scope.zon = function() {
var r = 0;
for(var i = 0; i < $scope.goods.length; i++) {
r += ($scope.goods[i].price * $scope.goods[i].num);
}
return r;
}
//数量减减
$scope.jian = function(aa) {
$scope.goods[aa].num--;
} //数量佳佳
$scope.jia = function(aa) {
$scope.goods[aa].num++;
}
$scope.shanchu = function(gname) {
for(var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].name == gname) {
$scope.goods.splice(i, 1);
break;
}
}
if($scope.goods.length == 0) {
$scope.showTa = true;
}
}
//批量删除
$scope.deleteMore = function() {
if($scope.checkAll) {
$scope.goods = [];
} else {
var checked = $("input[type=checkbox]:checked");
for(var i = checked.length - 1; i >= 0; i--) {
$scope.goods.splice(checked[i].value, 1);
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtli">
<center>
<h1 style="color: red;">我的购物车</h1>
<hr />
<div style=" margin-left: 600px;"><input type="button" value="♐批量删除" style="background: #FF0000;" ng-click="deleteMore()" /></div>
<table border="1px" ng-show="showTa">
<tr>
<th><input type="checkbox" ng-model="checkAll" /></th>
<th>名字</th>
<th>价钱</th>
<th>数量</th>
<th>总和</th>
<th>操作</th>
</tr>
<tr ng-repeat=" g in goods">
<td> <input type="checkbox" value="{{$index}}" ng-model="checkAll" /> </td>
<td>{{g.name}}</td>
<td>{{g.price | currency}}</td>
<td>
<button ng-click="jian($index)">-</button> {{g.num}}
<button ng-click="jia($index)">+</button>
</td>
<td>
{{g.he=g.price * g.num | currency}}
</td>
<td>
<input type="button" ng-click="shanchu(g.name)" value="删除" />
</td>
</tr>
<tr>
<td colspan="6"><input type="text" value="总价为{{zon()}}" /></td>
</tr>
</table>
</center>
</body>
</html>
1392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
