Angular购物车应用-优快云博客

本文链接：https://blog.youkuaiyun.com/whatfuck_/article/details/79808641

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body ng-app="myapp" ng-controller="myctrl">

<h2>wodegouche</h2>

<input type="button" id="" value="clear" ng-click="clearGoods()"/>

<table border="1" cellspacing="0" cellpadding="0">
<thead>
<tr><th><input type="checkbox" name="" id="" value="" /></th>
<th>name</th>
<th>price</th>
<th>数量</th>
<th>count</th>
<th>del</th>
</tr>

</thead>

<tbody>
<tr ng-repeat="a in goods">
<td><input type="checkbox" name="" id="" value="" /></td>
<td>{{a.gname}}</td>
<td>{{a.gprice}}</td>
<td>
<input type="button" id="" value="-" ng-click="reduce(a.gname)" />
<input type="text" id="" value="{{a.gnum}}" />

<input type="button" id="" value="+" ng-click="increase(a.gname)" />
</td>
<td>{{a.gprice*a.gnum}}</td>
<td><input type="button" id="" value="del" ng-click="delGood(a.gname)" /></td>
</tr>
</tbody>
</table>

<div>总计:{{getTotal()}}</div>

<script type="text/javascript">
//1.查找模块
var app=angular.module("myapp",[]);
//2.设置控制器
app.controller("myctrl",function($scope){

$scope.goods=[
{gname:"商品1",gprice:100,gnum:2},
{gname:"商品2",gprice:500,gnum:3},
{gname:"商品3",gprice:1000,gnum:2}
];

$scope.clearGoods=function(){
$scope.goods=[];
}

$scope.delGood=function(obj){
for (var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].gname==obj){
$scope.goods.splice(i,1);
break;
}
}
}

$scope.getTotal=function(){
var total=0;
for (var i = 0; i < $scope.goods.length; i++) {
total=total+$scope.goods[i].gprice*$scope.goods[i].gnum;

}
return total;

}

$scope.reduce=function(obj){
for (var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].gname==obj){
$scope.goods[i].gnum--;
break;
}

}
}
//
$scope.increase=function(obj){
for (var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].gname==obj){
$scope.goods[i].gnum++;
break;
}

}
}

});

</script>

</body>
</html>

添加删除清空总计