Angularjs购物车删除清空按钮增减数量等操作

最新推荐文章于 2023-02-16 22:12:01 发布

已成回忆1234

最新推荐文章于 2023-02-16 22:12:01 发布

阅读量674

点赞数

本文链接：https://blog.csdn.net/dxt0528/article/details/78853819

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
width: 600px;
height: 200px;
border: 1px solid darkgrey;
text-align: center;
}
td{
border: 1px solid darkgrey;
}

</style>
<script src="js/angular.min.js"></script>
<script src="js/jquery-1.11.1.js"></script>
<script>
var myapp=angular.module("dxtapp",[]);
myapp.controller("demo",["$scope",function($scope){

$scope.goods=[
{name:"苹果",price:2.5,number:1},
{name:"香蕉",price:1.5,number:3},
{name:"苦瓜",price:3.5,number:1},
{name:"黄瓜",price:2.2,number:3},
];

$scope.jia=function(obj){
$scope.goods[obj].number++;
}
$scope.jian=function(obj){

$scope.goods[obj].number--;
if($scope.goods[obj].number==0){
$scope.goods.splice(obj,1);
}
}

$scope.count=function(){
var sums=0;
for(var i=0;i<$scope.goods.length;i++){

sums=sums+$scope.goods[i].price*$scope.goods[i].number;
}
return sums;
}

$scope.del=function(obj){

$scope.goods.splice(obj,1);
}
}])

</script>
</head>
<body ng-app="dxtapp" ng-controller="demo">

<table cellspacing="0">
<tr>
<td>标题</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
<td>删除</td>
<tr ng-repeat="g in goods">
<td>{{g.name}}</td>
<td>{{g.price}}</td>
<td>
<input type="number" value="{{g.number}}" ng-model="g.number" style="width: 30px;" />
<button ng-click="jia($index)">+</button>
<button ng-click="jian($index)">-</button>
</td>
<td>{{(g.price*g.number) | number:2}}</td>
<td><button ng-click="del($index)">删除</button></td>
</tr>
</table>
总价格:<span ng-bind="count() | number:2"></span><br /><br />
<input type="button" value="提交" />
</body>
</html>

已成回忆1234

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Angularjs购物车删除清空按钮增减数量等操作

table{width: 600px;height: 200px;border: 1px solid darkgrey;text-align: center;}td{border: 1px solid darkgrey;}var myapp=angular.module("dxtapp",[]);myapp.controller("dem
复制链接

扫一扫