<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
tbody tr:nth-child(odd){
background-color: aqua;
}
tbody tr:nth-child(even){
background-color:deeppink;
}
</style>
<script type="text/javascript" src="js/angular.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$http.get("js/proo.json")
.success(function(aa){
$scope.message = aa;
})
//删除
$scope.sc = function(){
for(var i=0;i<$scope.message.length;i++){
if($scope.message[i].xz){
$scope.message.splice(i,1);
i--;
}
}
}
//清空购物车
$scope.qk = function(){
$scope.message.splice(0,$scope.message.length);
}
//商品总数
$scope.sum = function(){
count = 0;
for(var i in $scope.message){
count=count+$scope.message[i].gnum;
}
return count;
}
//商品总数
$scope.snum = function(){
count = 0;
for(var i in $scope.message){
count = count+$scope.message[i].gnum*$scope.message[i].gprice;
}
return count;
}
//商品数量的加减
$scope.count = function(num,sname){
for(var i=0;i<$scope.message.length;i++){
if($scope.message[i].gname == sname){
if($scope.message[i].gnum == 1 && num == -1 ){
var f = confirm("确认删除吗？")
if(f){
$scope.message.splice(i,1);
}
}
else{
$scope.message[i].gnum =
$scope.message[i].gnum+num;
}
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" placeholder="根据名称查询" style="border-radius: 10px;background-color: yellow;" ng-model="cx" />
<table border="1" style="background-color: darkgrey;">
<thead>
<tr>
<td ng-click="px='+gid'">商品编号</td>
<td>商品名称</td>
<td>商品数量</td>
<td>商品单价</td>
<td ng-click="px='-gcount'">价格小计</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="s in message | filter:{gname:cx} |orderBy:px">
<td>{{s.gid}}</td>
<td>{{s.gname}}</td>
<td>
<button ng-click="count(+1,s.gname)">+</button>
<input style="width: 30px;" ng-model="s.gnum" />
<button ng-click="count(-1,s.gname)">-</button>
</td>
<td>{{s.gprice}}</td>
<td>{{s.gnum*s.gprice}}</td>
<td><input type="checkbox" ng-model="s.xz" /></td>
</tr>
</tbody>
</table>
<button style="background-color: green;">商品总数{{sum()}}</button>
<button style="background-color: green;">商品总价{{snum()}}</button>
<button style="background-color: yellow;" ng-click="qk()" ng-model="del">清空购物车</button>
<button style="background-color: yellow;" ng-click="sc()" ng-model="ss">删除</button>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
tbody tr:nth-child(odd){
background-color: aqua;
}
tbody tr:nth-child(even){
background-color:deeppink;
}
</style>
<script type="text/javascript" src="js/angular.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope,$http){
$http.get("js/proo.json")
.success(function(aa){
$scope.message = aa;
})
//删除
$scope.sc = function(){
for(var i=0;i<$scope.message.length;i++){
if($scope.message[i].xz){
$scope.message.splice(i,1);
i--;
}
}
}
//清空购物车
$scope.qk = function(){
$scope.message.splice(0,$scope.message.length);
}
//商品总数
$scope.sum = function(){
count = 0;
for(var i in $scope.message){
count=count+$scope.message[i].gnum;
}
return count;
}
//商品总数
$scope.snum = function(){
count = 0;
for(var i in $scope.message){
count = count+$scope.message[i].gnum*$scope.message[i].gprice;
}
return count;
}
//商品数量的加减
$scope.count = function(num,sname){
for(var i=0;i<$scope.message.length;i++){
if($scope.message[i].gname == sname){
if($scope.message[i].gnum == 1 && num == -1 ){
var f = confirm("确认删除吗？")
if(f){
$scope.message.splice(i,1);
}
}
else{
$scope.message[i].gnum =
$scope.message[i].gnum+num;
}
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" placeholder="根据名称查询" style="border-radius: 10px;background-color: yellow;" ng-model="cx" />
<table border="1" style="background-color: darkgrey;">
<thead>
<tr>
<td ng-click="px='+gid'">商品编号</td>
<td>商品名称</td>
<td>商品数量</td>
<td>商品单价</td>
<td ng-click="px='-gcount'">价格小计</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="s in message | filter:{gname:cx} |orderBy:px">
<td>{{s.gid}}</td>
<td>{{s.gname}}</td>
<td>
<button ng-click="count(+1,s.gname)">+</button>
<input style="width: 30px;" ng-model="s.gnum" />
<button ng-click="count(-1,s.gname)">-</button>
</td>
<td>{{s.gprice}}</td>
<td>{{s.gnum*s.gprice}}</td>
<td><input type="checkbox" ng-model="s.xz" /></td>
</tr>
</tbody>
</table>
<button style="background-color: green;">商品总数{{sum()}}</button>
<button style="background-color: green;">商品总价{{snum()}}</button>
<button style="background-color: yellow;" ng-click="qk()" ng-model="del">清空购物车</button>
<button style="background-color: yellow;" ng-click="sc()" ng-model="ss">删除</button>
</body>
</html>
265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
