练习

最新推荐文章于 2025-07-18 08:05:44 发布

原创最新推荐文章于 2025-07-18 08:05:44 发布 · 179 阅读

CC 4.0 BY-SA版权

如有需要，请复制，不好不要嫌弃哦

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js"></script>
<script>
var app=angular.module("liuhanchao",[]);
app.controller("liuhanchao1",function($scope){
$scope.px='price';
$scope.sj=true;
$scope.goods=[{bianhao:"001",gname:"手机",shuliang:3,price:1000,xiaoji:3000},
{bianhao:"002",gname:"电脑",shuliang:4,price:2000,xiaoji:4000},
{bianhao:"003",gname:"电视",shuliang:5,price:3000,xiaoji:6000}

]
$scope.del=function(i){
$scope.goods.splice(i,1);
}
$scope.count=function(num,sname){
//根据索引查找对象---->对象的level级别
console.log("根据索引查找的对象",$scope.goods[i]);
for(var i=0;i<$scope.goods.length;i++){
if($scope.goods[i].gname==sname){
$scope.goods[i].shuliang=$scope.goods[i].shuliang+num;
}
}
}
$scope.sum = function() {
var count = 0;
for(var i in $scope.goods) {
count = count + $scope.goods[i].price*$scope.goods[i].shuliang;
}
return count;
}
$scope.sunm = function() {
var count = 0;
for(var i in $scope.goods) {
count = count + $scope.goods[i].shuliang;
}
return count;
}
$scope.delete=function(i){
$scope.goods.splice(i);
}
})
</script>
<style>
.center{
text-align: center;
}
table{
margin-left: 35%;
}
input{
margin-left:55%;
background: #E6B400;
}
button{
background: #E6B400;
}
.play1{
background: #4D4D4D;
}
button{
margin-left: 20%;
}

</style>
</head>
<body ng-app="liuhanchao" ng-controller="liuhanchao1">
<h1 class="center">我的购物车详情</h1>
<input ng-model="selname" placeholder="查找商品名称"/>
<table border="1px" ng-model="px">
<tr class="play1">

<td ng-click="px='regdate';sj=!sj">商号编码</td>

<td>商品名称</td>
<td ng-click="px='shuliang'; sj=!sj">商品数量</td>
<td ng-click="px='price'; sj=!sj">商品单价</td>

<td ng-click="sj=!sj">价格小计</td>

<td>操作</td>
</tr>
<tr ng-repeat="g in goods|filter:{gname:selname}|orderBy:px:sj">
<td>{{g.bianhao}}</td>
<td>{{g.gname}}</td>
<td><button ng-click="count(+1,g.gname)">+</button> <input style="width: 30px;" ng-model="g.shuliang" /><button ng-click="count(-1,g.gname)">－</button></td>
<td>{{g.price}}</td>
<td>{{g.shuliang*g.price}}</td>
<td><button ng-click="del($index)">删除</button></td>
</tr>
</table>

<button>
商品总价:{{sum()}}
</button>

<button>
商品数量:{{sunm()}}
</button>
<button ng-click="delete($index)">
删除所有
</button>

</body>

</html>

代码效果