这次给大家带来angular实现可添加删除与计算总金额效果插件，angular实现可添加删除与计算总金额插件的注意事项有哪些，下面就是实战案例，一起来看一下。
本文实例讲述了angular实现可删除并计算总金额的购物车功能。分享给大家供大家参考，具体如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>www.jb51.net angular可删除与计算总额的购物车</title>
<script src="angular.min.js"></script>
<style>
table{
width: 500px;
height: 300px;
border-collapse: collapse;
text-align: center;
}
td{
border: 1px solid black;
}
</style>
<script>
var myapp=angular.module(myapp,[]);
myapp.controller(myctrl,function ($scope) {
$scope.goods=[{
gname:iphone8,
num:3,
price:999
},{
gname: iphone7,
num: 4,
price: 599
},{
gname: iphone6,
num: 5,
price: 499
},{
gname: iphone5,
num: 6,
price: 399
}
];
$scope.allsum=function () {
var allprice=0;
for(var i=0;i<$scope.goods.length;i++){
allprice+=$scope.goods[i].price*$scope.goods[i].num;
}
return allprice;
};
$scope.remove=function (index) {
if(confirm('确定移除此项嘛？')){
$scope.goods.splice(index,1);
}
if($scope.goods.length==0){
alter('你的购物车为空');
}
};
})
</script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<table>
<tr>
<td colspan="5">你的购物车</td>
<tr>
<td>商品名称</td>
<td>数量</td>
<td>单价</td>
<td>小计</td>
<td>操作</td>
</tr>
<tr ng-repeat="arr in goods">
<td>{{arr.gname}}</td>
<td>{{arr.num}}</td>
<td>{{arr.price|currency:rmb￥}}</td>
<td>{{arr.num*arr.price|currency:rmb￥}}</td>
<td><button ng-click="remove($index)">删除</button></td>
</tr>
<tr>
<td colspan="5">总金额<span ng-bind="allsum()|currency:'rmb'"></span></td>
</tr>
</table>
</body>
</html>
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
以上就是angular实现可添加删除与计算总金额效果插件的详细内容。