angular js 结算总价

最新推荐文章于 2018-07-27 02:30:40 发布

唐僧吃烤肉

最新推荐文章于 2018-07-27 02:30:40 发布

阅读量249

点赞数

本文链接：https://blog.csdn.net/YanZhe777/article/details/78856867

版权

这个示例展示了如何在Angular JS应用中实现购物车功能，包括商品名称、单价、数量、价格显示以及加减数量和删除操作。通过`ng-repeat`指令遍历商品列表，动态计算总价并实时更新。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
table{
width: 950px;
height: 310px;
}
tr:nth-child(2n){
background-color: gainsboro;
}
</style>
<script src="js/angular.min.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.shoppingcar=[{name:"苹果",count:1,price:2.5},{name:"香蕉",count:2,price:5.5},{name:"橘子",count:3,price:3.5}];
$scope.summoney=function(){
var sum = 0;
for(var i = 0; i<$scope.shoppingcar.length; i++){
sum+=$scope.shoppingcar[i].count*$scope.shoppingcar[i].price;
}
return sum;
}
$scope.upnum=function(index,num){

$scope.shoppingcar[index]. count=$scope.shoppingcar[index].count+num;

if($scope.shoppingcar[index].count<=0){
$scope.shoppingcar.splice(index,1);
}
}
$scope.del=function(obj){
$scope.shoppingcar.splice(obj,1);
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<table >
<tr>
<td>标题</td>
<td>单价</td>
<td>数量</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr ng-repeat="goods in shoppingcar">
<td>{{goods.name}}</td>
<td>{{goods.price}}</td>
<td>
<input ng-model="goods.count" style="width: 25px;" />
<button ng-click="upnum($index,+1)">+</button>
<button ng-click="upnum($index,-1)">-</button>
</td>
<td>{{goods.price*goods.count}}</td>
<td>
<button ng-click="del($index)">删除</button>
</td>
</tr>

</table>
总价:{{summoney()}}
</body>
</html>

唐僧吃烤肉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
angular js 结算总价

table{width: 950px;height: 310px;}tr:nth-child(2n){background-color: gainsboro;}var app = angular.module("myApp",[]);app.controller("myCtrl",function($scope){ $scope.shoppingca
复制链接

扫一扫